this is probably easier to see at the fiddle. I have social icons with their link displaying next to them. The problem is, the social icons are 40x40. The text displays at the foot of the icon. I want the text in the center of the icons. How do i pull that off? Can't seem to figure it out. Any help is greatly appreciated!
http://jsfiddle.net/grem28/meY8K/1/
<footer>
<ul>
<li><div class="footer_icon facebook"></div><div class="iconText">Facebook.com</div></li>
<li><a class="inst" href="http://instagram.com" target="_blank" title="Follow on Instagram"><div class="footer_icon instagram"></div><div class="iconText">We're on Instagram</div></a></li>
<li><a class="twt" href="https://twitter.com" target="_blank" title="Follow us # Twitter.com"><div class="footer_icon twitter"></div><div class="iconText">Twitter.com</div></a></li>
<li class="right"><a class="pin" href="http://www.pinterest.com" target="_blank" title="Visit Pinterest.com"><div class="footer_icon pinterest"></div><div class="iconText">Pinterest.com</div></a></li>
</ul>
</footer>
The following seems to work:
.footer_icon {
height: 40px;
width: 40px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
display:inline-block;
vertical-align: middle;
}
add vertical-align: middle to your CSS rule for .footer-icon.
See demo at: http://jsfiddle.net/audetwebdesign/g3Jk6/
Related
Good afternoon
in an html site, I have one rectangular image and when I hover over it a second image pops out. The second image is bigger than the original image and it on top of a button.
The problem is, I can't click the button, it always triggers the hover image.
How can fix this so that I can click the button?
Here's a fiddle
HTML:
<li id="menu-item-2365" class="positionabsolute menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-2365 has-image"><a href="como-ajudar/donativos/"
class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper">
<img width="126" height="38" src="http://piq.codeus.net/static/media/userpics/piq_307293_400x400.png" class="menu-image menu-image-title-hide" style="position:absolute" alt=""><img width="126" height="145" src="http://piq.codeus.net/static/media/userpics/piq_307293_400x400.png" style="position:absolute" class="hovered-image menu-image-title-hide" alt="" ></span></a></li>
<br/>
<br/>
<br/>
<input type="button" value="click" style="margin-left:50px" />
https://jsfiddle.net/u15qbh6w/
You can set display: none to the second image and if it is hovered, then display: initial
So the css of your example would look like that:
.menu-item a.menu-image-hovered img.hovered-image,
.menu-item a.menu-image-hovered:hover img.menu-image {
opacity: 0;
transition: opacity 0.25s ease-in-out 0s;
}
.menu-item a.menu-image-hovered img.hovered-image {
display: none;
}
.menu-item a.menu-image-hovered:hover img.hovered-image {
display: initial;
opacity: 1;
}
here's a little css I use to swap images. I use them for little 32px social icons which go from green image to red image. They just swap.
This is the code (using placeholder images):
.soc img:last-child {
display: none;
}
.soc:hover img:first-child {
display: none;
}
.soc:hover img:last-child {
display: inline-block;
}
<li>
<a class="soc" href="some-link-here" target="_blank">
<img src="https://lorempixel.com/32/32/cats" />
<img src="https://lorempixel.com/32/32/food" />
</a>
</li>
I want to add a little DELAY between the swaps. Like 0.8 or 1.6 seconds.. so the transition between images / color changes are smoother and prettier.
The transition should go like this: Normal Condition to HOVER condition and also, when you just hover and move mouse away, getting back to its normal condition should also have the delay.. well that's what I would love to make.
I tried all kinds of DELAY codes that I was able to google, none worked.. But I also don't want to change the main aforementioned css code which I use, to the ones that will have to have the background-image so that for each icon I gotta make a different 5 line-long css code.
Can anyone please help me with this?
Thank you.
set the right opacity starting points
:first-child or green starts at 1 or default value and goes to 0 on :hover and :first-child or red starts at 0 and goes to 1 on :hover.
position:absolute stacks the objects on top of each other.
then use transition:opacity ease 1s for the smooth animation effect. What this property does is it tells the browsers to fade the transition from opacity:0 to opacity:1 over the duration of 1s.
adding it to the selector instead of the pseudo-class :hover makes the smooth transition occur both when you hover and when you leave the :hover state.
.soc img {
position: absolute;
width: 40px;
height: 40px;
transition: opacity ease 1s;
}
.soc img:first-child {
background: green
}
.soc:hover img:first-child {
opacity: 0
}
.soc img:last-child {
opacity: 0;
background: red
}
.soc:hover img:last-child {
opacity: 1
}
<li>
<a class="soc" href="some-link-here" target="_blank">
<img src="/iconslocation/icongreen.png" />
<img src="/iconslocation/iconred.png" /></a>
</li>
It sounds you want to soften the transition between images by fading from one to the other. I recommend using CSS to transition opacity over time.
In my example below, I've positioned the second image absolutely, so it's placed directly in front of the first one, and set it to be transparent. Then I fade it in upon hover.
ul {
list-style: none;
padding: 0;
margin: 0;
}
.soc {
position: relative;
display: inline-block;
}
.soc img:last-child {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .2s;
}
.soc:hover img:last-child {
opacity: 1;
}
<ul>
<li>
<a class="soc" href="some-link-here" target="_blank">
<img src="//lorempixel.com/50/50/abstract/1/" />
<img src="//lorempixel.com/50/50/abstract/2/" /></a>
</li> <li>
<a class="soc" href="some-link-here" target="_blank">
<img src="//lorempixel.com/50/50/abstract/3/" />
<img src="//lorempixel.com/50/50/abstract/4/" /></a>
</li>
</ul>
Pure CSS
If we apply the default image as the background-image: url() of all a.soc elements, and give them all an :after pseudo element holding the second image to show on :hover (and optionally (and ideally for accesibility) :focus), we can then transition the opacity of the :after element to 1 on user interaction, and at full opacity it will cover/hide its parent's background-image.
The effect is as expected, but requires no <img> markup and is automatically applied by the magic of CSS to every link with class="soc".
.soc,
.soc:after {
display: inline-block;
width: 32px;
height: 32px;
background: url( https://lorempixel.com/32/32/cats );
}
.soc:after {
opacity: 0;
content: "";
position: absolute;
background: url( https://lorempixel.com/32/32/food );
transition: opacity 800ms; /* timing can be in seconds or milliseconds */
}
.soc:hover:after,
.soc:focus:after {
opacity: 1;
}
<ul>
<li><a class="soc" href="some-link-here" target="_blank"></a></li>
<li><a class="soc" href="some-other-link-here" target="_blank"></a></li>
<li><a class="soc" href="another-link-here" target="_blank"></a></li>
</ul>
I'm just not sure why these transitions are so laggy.I've never had this happen to me before.
My code is:
<section class='containgrid'>
<div class="grid">
<div class="unit one-third">
<div class="eventbox">
<img class='imgfit' src='images/choice1.jpg'/>
<h2 class='contactheading'>Questions?</h2>
<h3 id='subheading'>subheading</h3>
</div>
</div>
</div>
</section>
Not shown is 2 more "unit one-third"s, I took them out for clarity but the other two are the exact same as the first one. As you can tell I'm using gridism for a simple grid layout, my relevant css code is so:
.imgfit{
width:98%;
margin:.2em;
height:375px;
}
.eventbox{
background-color:#F1EFEF;
margin-top:15%;
width:100%;
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
transition: background-color 0.3s;
-webkit-transition: border 0.3s;
-moz-transition: border 0.3s;
transition: border 0.3s;
border:solid #F1EFEF .2em;
}
.eventbox:hover{
background-color:#DBDBDB;
border:solid #7D7D7D .2em;
}
This seems really straightforward to me, but when I open it up in browser it becomes really laggy and is not smooth at all.Why?
what I would like is to make my site menu switching between panel and classic horizontal menu.My goal is to change the site menu depending on the screen size (desktop/mobile)... but it is another story!
I have the following working solution (http://jsfiddle.net/998HD/2/):
HTML
<div data-role="page">
<div data-role="header">
<h1>Title</h1>
Panel
</div>
<div id="pnl" data-role="panel" data-display="overlay">
<ul data-role="listview">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div data-role="content">Lorem ipsum</div>
</div>
CSS
.menu.ui-panel {
position: relative;
width: 100%;
min-height: 0
}
.menu.ui-panel .ui-li {
display: inline-block;
margin: 0;
border: 0
}
JS
$('#lnkpnl').click(function() {
var menu = 1; // 0 = panel, 1 = horizontal
if (menu) $('#pnl').addClass('menu').insertAfter('.ui-header');
$('#pnl').panel('open')
})
JQuery Mobile moves #pnl panel after the header and content and this prevents me from simply apply:
.menu.ui-panel {
position: static
/*... other props ...*/
}
and avoid line 1 and 2 in javascript code.
So, I ask you. Is my solution the best? Is there a pure css solution?
Many thanks.
You are right on point. There is a way to do this with transition CSS. I included a Fiddle to show you, but it is jquery assisted. Then again, this is a very light JS call so it shouldn't toruble your application. Then again, neither is yours. So you are good either way.
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
Hope it helps
FIDDLE
I am using bootstrap 3 to create my nav bar. I also needed to place a search bar on the navbar. So my code looks like this
<div class="navbar navbar-default">
<a class="navbar-brand">Logo Image</a>
<ul class="nav navbar-nav">
<li class="active">Calendar</li>
<li>Customerr</li>
<li>Providers</li>
</ul>
<form class="navbar-form navbar-right" action="">
<div class="form-group">
<input type="text" class="form-control mac-style" name="Search" id='nav-search' placeholder="Search">
</div>
<input type="submit" name="search" value="Search" class="btn btn-default" >
</form>
</div>
I want the input box to get bigger when the usere focuses to search but to the left like stack's search bar. I tried the following css at first
.mac-style:focus{
width: 500px;
}
and the input box grows to the left but the transition is very rough. So i tried to add the transition property(webkit moz o an default) like this
.mac-style:focus{
width: 500px;
-webkit-transition: width 1s ease-in-out;
-moz-transition:width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
but the input changes width to the right going behind the search button and off the nav-bar. Ho can i make it act like the css without the transition(grow to the left). The way my nav bar is created, is there a way to make it stop when it reaches the last li so it is more dynamic?
If i correctly understand you - take a this fiddle . I don't know yours other css styles, but you can a create your fiddle and show it to us.
The reason is, you should give width to normal state also.
JSFIDDLE : http://jsfiddle.net/surjithctly/mdXqr/
.mac-style {
width: 100px;
-webkit-transition: width 1s ease-in-out;
-moz-transition:width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.mac-style:focus{
width: 260px;
}