DanielNolan DanielNolan - 1 year ago 79
HTML Question

changing image during flip css animation

I currently have a rotating image that flips around and has writing on the back using animated css, however what I want is that when the image flips around it changes with another image so it has a solid colour instead of a reversed version of the image.

CSS

.hover-img {
position: relative;
width: 400px;
height: 300px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background:url(bbclike/topright.png);
-webkit-transform:rotateY(180deg);
-webkit-transform-style: preserve-3d;
line-height:200px;
text-align:center;
font-size:0;

}
.hover-img:hover{
-webkit-transform:rotateY(0deg);
font-size:14px;
color:white;
background-color:#FF0;

}


HTML

<div class="hover-img">
Text Goes Here
</div>

lpg lpg
Answer Source

Just put in hover section whatever you want when user hovers the div... E.g. :

.hover-img:hover{
background:url(---HERE IMAGE 2---);
font-size:14px;
color:white;
background-color:#FF0;
}

Working fiddle demo here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download