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.

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest

Related Designs and Schematics

The following two tabs change content below.

Frank Donald

Junior Network Engineer at Tata Communications
Frank Donald is an Electronics and Communication Engineer who is very passionate about his subject. Reading, Surfing and Blogging are the things he loves.

Ask your query

Be the First to Comment!

Notify of
avatar
wpDiscuz