Vertical Image Flip with Caption display using CSS and HTML


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.



#card {
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin: 100% 75px;
   -webkit-transition: all 0.7s ease;
   transform-style: preserve-3d;
   transform-origin: 100% 75px;
   transition: all 0.7s ease;
#frame:hover #card {
   -webkit-transform: rotateX(-180deg);
   transform: rotateX(-180deg);
#front_pos, #back_pos {
#back_pos {
   -webkit-transform: rotateX(180deg);
   transform: rotateX(180deg);

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.


<div id="frame">
  <div id="card">
    <img id="front_pos" src="Your image URL" alt="img"/>
       <p id="back_pos">Your text</p>

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.

The following two tabs change content below.
Frank Donald
Frank Donald is an Electronics and Communication Engineer who loves building stuff in his free time. Video games, blogging and programming are the things he loves most
Frank Donald

Latest posts by Frank Donald (see all)

Ask your query

Notify of