Vertical Image Flip with Caption display using CSS and HTML

ice-cave-cool-image-flip-hover-effect-css-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.

VIEW DEMO

CSS CODE:

#card {
   width:250px; 
   height:250px; 
   position:relative;
   -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 {
   width:250px; 
   height:250px; 
   position:absolute; 
   left:0; 
   -webkit-backface-visibility:hidden;
   backface-visibility:hidden;
                                   }
#back_pos {
   position:absolute;
   bottom:170px;
   font-size:30px;
   color:#fff;
   -webkit-transform: rotateX(180deg);
   transform: rotateX(180deg);
   text-align:center;
                }

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:

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

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.

Vertical Image Flip with Caption display using CSS and HTML

CSS CODE:

HTML CODE:

Related Posts:

Leave a Comment Cancel reply

Vertical Image Flip with Caption display using CSS and HTML

CSS CODE:

HTML CODE:

Related Posts:

Related content

Leave a Comment Cancel reply