Photo Flip hover effect using CSS and HTML

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest
salena-gomez-wallpaper-photo-flip-hover-effect-css

Flipping image hover effect can be done with ease using simple CSS and HTML in any website. This hover effect will be very effective in in gallery section where we want to reveal info of the image or another image at its back. You can view the demo of this effect in the Image hover effects collection page.

CSS CODE:

.flip_container{
                   width: 250px;
                    height: 250px;
                         }
.flip_container:hover .flip 
                        {      
          -webkit-transform: rotateY(180deg);
                           transform: rotateY(180deg);
                 }
.flip {
  -webkit-transition: 0.5s;
  transition: 0.5s;
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: relative;
        }
.flip_front, .flip_back {
                            -webkit-backface-visibility: hidden;
                                    backface-visibility: hidden;
                            position: absolute;
                            top: 0;
                            left: 0;
                                    }
.flip_front {
           -webkit-transform: rotateY(0deg);
                   transform: rotateY(0deg);
                   }
.flip_back {
            -webkit-transform: rotateY(180deg);
                    transform: rotateY(180deg);
                  }

The property “transform:rotateY(180deg)” is  responsible for flip effect which rotates the photo about 180 deg in Y axis. The property “backface-visibility:hidden” hides the image when not facing the screen so the alternate image appears when flipped. 

HTML CODE:

<div class="flip_container">
    <div class="flip">
<div class="flip_front">
    <img src="Your image URL" width="250" height="250"></img>         </div>
        <div class="flip_back">
    <img src="Your image URL"  width="250" height="250"></img>
        </div>
     </div>
</div>

The HTML part of the code is pretty straightforward all you have to do is place the images in the <div> containers with specified classes. You can also replace images with text inside “flip_back” to display description about the image when flipped.

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