Vertical Image flip using CSS and HTML

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest
Christmas-tree-vertical-image-flip

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.

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.

Related Designs and Schematics

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest
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
Frank Donald

Latest posts by Frank Donald (see all)

Ask your query

Be the First to Comment!

Notify of
avatar
wpDiscuz