Css hover image transition acting weird - html

Question

I've been trying to figure out why the hover image is flying from the left to bottom with transition effect even though the hover image is only set to padding-bottom. I just want the hover image to appear at the bottom of the menu when hovered.
http://jsfiddle.net/9buk14b5/1/
<header>
<div class="row">
<div class="large-12 columns">
<nav id="primary_nav">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Get a Quote</li>
<li>FAQ</li>
</ul>
</nav>
</div>
</div>
</header>
#primary_nav ul{
display: inline;
list-style-type: none;
li{
float: left;
padding: 15px 50px 15px 0;
a{
color:#ccc;
&:hover{
color:#fff;
background: url('../images/hover.png') no-repeat;
background-position: center center;
width: 22px;
height: 19px;
padding-bottom: 35px;
-webkit-transition: 0.8s all ease-out;
-o-transition: 0.8s all ease-out;
-moz-transition: 0.8s all ease-out;
transition: 0.8s all ease-out;
}
}
}
}

Answer 1

Use the :after pseudo-element in conjunction with :hover.
li {
position: relative;
float: left;
padding: 15px 50px 15px 0;
a {
padding-bottom: 35px;
&:after {
position: absolute;
content: '';
bottom: -3px;
left: 25%;
display:block;
margin: 0 -11px;
background: url('http://i60.tinypic.com/35a7xvs.png') no-repeat 0;
width: 22px;
height: 19px;
opacity: 0;
transition: opacity 500ms linear;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
}
&:hover {
&:after {
opacity: 1;
}
}
}
}
Add the background-image to the :after pseudo element allows you to set a style to applied when its parent <a> is hovered. In this case, we set the pseudo element toopacity:0; initially and opacity:1;, then we simply set the transition-property to watch opacity.
Fade in/Fade out Examples:
Fiddle using original background image: http://jsfiddle.net/9buk14b5/8/
Fiddle using only css to create triangle: http://jsfiddle.net/9buk14b5/7/
A few things:
The odd animation behavior is fixed by tell the transition which property to animate. In your code it's set to all. Change that to padding. I've also changed the timing function to be ease-in-out.
-webkit-transition: 0.8s padding ease-in-out;
-o-transition: 0.8s padding ease-in-out;
-moz-transition: 0.8s padding ease-in-out;
transition: 0.8s padding ease-in-out;
Second, your padding-bottom amount needs to be the sum of the height of the element it is trying to go to the bottom of, and any padding, border, margin offset it may include. In your case, the magic number was 132px
padding-bottom: 132px;
Here is a working fiddle with these modifications: http://jsfiddle.net/rv9wbn8b/
Edit:
To show the arrow without any effect, simply move the padding outside of the :hover
Updated fiddle: http://jsfiddle.net/9buk14b5/4/