Image flip hover effect using CSS and HTML

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

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

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