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.

VIEW DEMO

CSS CODE:

.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 {
           width:250px; 
           height:250px; 
           position:absolute; 
           left:0; 
           -webkit-backface-visibility:hidden;
           backface-visibility:hidden;
                   }
.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.

HTML CODE:

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

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.