Photo Flip hover effect using CSS and HTML

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.