Vertical Image flip using CSS and HTML


Image flipping hover effects can be very useful where we need to display dual images about a specific theme or product in a single spot. This Vertical image flip hover effect can be implemented very easily using simple CSS and HTML. You can view the demo of this vertical flip effect in the below link.


.vertical_flip {
        width:250px; height:250px; position:relative;
        -webkit-transform-style: preserve-3d;
        -webkit-transform-origin: 100% 125px;
        -webkit-transition: all 0.7s ease;
        transform-style: preserve-3d;
        transform-origin: 100% 125px;
        transition: all 0.7s ease;
.container:hover .vertical_flip {
                 -webkit-transform: rotateX(-180deg);
                 transform: rotateX(-180deg);
.front, .back {
.back {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);

The property “transform:rotateX(-180deg)” flips the front image to 180 degree revealing the image in the back when the container is hovered. “backface-visibility:hidden” is used to hide the alternate image so that a single image is displayed at an instant.


<div class="container">
<div class="vertical_flip">
<img class="front" src="Front Image URL">
<img class="back" src="Back Image URL"></img>

The HTML part of this code is pretty straightforward. All you have to do is to place the elements in “div” container with respective classes.

The following two tabs change content below.
Frank Donald

Frank Donald

Junior Network Engineer at Tata Communications
Frank Donald is an Electronics and Communication Engineer who loves building stuff in his free time. Video games, blogging and programming are the things he loves most

Ask your query

Notify of