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.