Image flip hover effect using CSS and HTML

Paris-city-night-view-sky-view-desktop-wallpapers-image-flip-hover

Hai Folks here is another interesting image hover effects using simple HTML and CSS coding.I have posted several image hover effects in my blog and i hope it would have given you great use.This article is going to teach how to make a image Flip hover effect.

VIEW DEMO

CSS:

#toss{
    position: relative;
    margin: 10px auto;
    width: 450px;
    height: 281px;
    z-index: 1;
    perspective: 1000;
        }
#rev{
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
        }
#toss:hover #rev{
      transform: rotateY(180deg);
         }
 .face {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
          }
 .face.back {
     display: block;
     transform: rotateY(180deg);
     box-sizing: border-box;
          }

The above CSS coding was written in a way to rotate the image in Y axis of 180 degrees so that the image can achieve a flipping effect when hovered.At the back end another image was used to display so that the image appears to be flipping when hovered.

HTML:

<div id="toss">
  <div id="rev">
    <div class="face">
       <img width="500" height="400" src="Front Image URL here."/>
     </div>
    <div class="face back">
       <img width="500" height="400" src="Back image URL here"/>
    </div>
  </div>
</div>

The HTML part only needs to declare the id and classes inside the <div> tag.As you can see in the above code all you need to do is placing the image link inside the “src” and your effect will be ready now.