/*###################################################################################################*/
.image_overlay_hover_effect{
display:block;
width:240px;
height:160px;
background:url("http://premiumcoding.com/CSSTricks/AnimatedHover/imageHover.png");
position:absolute;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0); /* For IE8 and earlier */
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.image_overlay_hover_effect:hover{
opacity:0.9;
filter:alpha(opacity=0.9);
}
/*###################################################################################################*/
.image_overlay_hover_effect2{
display:block;
width:240px;
height:160px;
background:#1e1e20;
position:absolute;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0); /* For IE8 and earlier */
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.image_overlay_hover_effect2:hover{
opacity:0.5;
filter:alpha(opacity=0.5);
}
/*###################################################################################################*/
.image_overlay_hover_effect3{
cursor:pointer;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.image_overlay_hover_effect3:hover{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}