Captions play a significant role in almost all the pictures in a website.So it is important to add one to our images and will be even cooler if we add it along with a hover effect.This article will demonstrate demonstrate the method of adding caption to your image with a vertical image flip hover effect.
The property "transform:rotateY(-180deg)" flips the front image to 180 degree revealing the image in the back when the container is hovered."backface-visibility:hidden" is used to hide the alternate image so that a single image is displayed at an instant.The "#front_pos" and "#back_pos" defines the properties of the image before flipping and after flipping.
HTML CODE:
Your text
The HTML part of this code is pretty straightforward.All you have to do is to place the elements in "div" container with respective ID's.
