Saturday, 28 September 2013

Jumping / Jitter for DIV Hover state

Jumping / Jitter for DIV Hover state

I just cant seem to fix this issue where on hover, the DIV expands and
then shrinks giving a "jumpy" or "jitter" look.
I have a list which will be for images and I want the hover state to be an
block that is 10px less than its parent;
Here is my fiddle:
Here is my code;
HTML
<div id="container">
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
</div>
CSS - the inner class is the one with the hover
#container {
padding: 5px;
margin: 0 auto;
border: 2px solid black;
}
.item {
display:block !important;
list-style:none;
float: left;
background: #CCC;
margin: 5px;
width: 50px;
height: 50px;
}
.item.w2 { width: 300px; }
.item.h2 { height: 200px; }
.inner {
background:#fff;
background: rgba(255, 255, 255, 1);
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
margin:0;
padding:0;
text-align: center;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
}
.inner:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
opacity: .95;
z-index:1;
}
/* no transition on .isotope container */
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: .6s;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
opacity:.5;
}
Consequently the "jumpy" or "jitter" disappears when there is no
-transition such as ease-in-out or opacity.
I appreciate anyone who has a look! any suggestions would be great this is
a huge learning curve for me :)

No comments:

Post a Comment