I AM HAVING AN ISSUE WITH MY CODE. I WANT MY CODE FLIP WHEN I HOVER OVER ONE PIC
ID: 3938175 • Letter: I
Question
I AM HAVING AN ISSUE WITH MY CODE. I WANT MY CODE FLIP WHEN I HOVER OVER ONE PICTURE AND WHILE IM HOVERING ON THE FIRST PICTURE THE SECOND PICTURE IS ON THE BACK BUT IT ONLY FLIPS WHEN IM HOVERING OVER THE PICTURE. PLEASE HELP!!!
<html>
<head>
<script type="text/css">
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
</script>
<body
<div class=".flip-container">
<div class=".flipper">
<div class=".front">
<!-- front content --><img src="curtis.jpg">
</div>
<div class=".back">
<!-- back content --><img src="terrace.jpg">
</div>
</div>
</div>
</body>
<html>
Explanation / Answer
ANS:
<!--
I AM HAVING AN ISSUE WITH MY CODE. I WANT MY CODE FLIP WHEN I HOVER OVER ONE PICTURE AND WHILE IM HOVERING ON THE FIRST PICTURE THE SECOND PICTURE IS ON THE BACK BUT IT ONLY FLIPS WHEN IM HOVERING OVER THE PICTURE. PLEASE HELP!!!
-->
<html>
<head>
<style type="text/css">
/* entire container, keeps perspective */
.flip-container {
width:250px;
height:250px;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .flipper {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* flip speed goes here */
.flipper {
-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
<body>
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content --><img src="curtis.jpg" />
</div>
<div class="back">
<!-- back content --><img src="terrace.jpg" />
</div>
</div>
</div>
</body>
<html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.