изменение изображения во время флип-анимации css

В настоящее время у меня есть вращающееся изображение, которое переворачивается и имеет надпись на обратной стороне с использованием анимированного 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>

animation html css css-animations
person DanielNolan    schedule 18.07.2014    source источник
comment
Взгляните на это: codepen.io/jjhesk/pen/lHdCA   -  person APAD1    schedule 18.07.2014

Ответы (2)


arrow_upward
0
arrow_downward

Просто поместите в раздел наведения все, что хотите, когда пользователь наводит курсор на div... Например. :

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

Демонстрация рабочей скрипки здесь

person lpg    schedule 18.07.2014

arrow_upward
0
arrow_downward

вы можете попробовать это

http://jsbin.com/tejiduq/1/edit?html,css,output

измените класс контейнера, чтобы вы могли управлять классом DOM.

//html 
<div>
    <i class="icon"></i>
</div>
<br>
<input class="button" type="button" value="flip">

//css
div{
}
.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  transition: all 0.5s;
}

div .icon {
    background: url("https://www.w3schools.com/images/compatible_chrome.gif") no-repeat;
}

div.ie .icon{
  background: url("https://www.w3schools.com/images/compatible_edge.gif") no-repeat;
  transform: scaleX(-1)
}

//javascript 
$(".button").click(function() {
  $("div").toggleClass("ie");
});

Надеюсь, это окажется вам полезным.

person Kapilrc    schedule 27.07.2017