html - 在翻转 css 动画期间更改图像

Question

我目前有一个旋转图像，可以翻转并使用动画 css 在背面写字，但是我想要的是，当图像翻转时，它会随着另一个图像发生变化，因此它具有纯色而不是反转版本图片。

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>

Answer 1

当用户将鼠标悬停在 div 上时，只需将你想要的任何内容放入悬停部分...例如:

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

工作 fiddle 演示 here