Hello Everyone!!
In this blog we are going to flip an image. The image has two side:-
Front side:- Here is an image.
Back side:- Here is some text.
When the hover effect is apply to the image block the the back side text will appear. It is done by using css transform properties, we use the transform (rotate) properties to rotate the image block so the the back-side text will display on hover effect.
Code:-
<body>
<div class="flip">
<div class="flipper">
<div class="front">
<img src="">
</div>
<div class="back">
<p>flip effect</p>
</div>
</div>
</div>
CSS:-
.flip-container {
perspective: 1000px;
}
.flip:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip, .front, .back {
width: 320px;
height: 480px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
0 Comment(s)