Vertical Image Flip with Caption display using CSS and HTML

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest
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.

Related Designs and Schematics

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest
The following two tabs change content below.

Frank Donald

Junior Network Engineer at Tata Communications
Frank Donald is an Electronics and Communication Engineer who is very passionate about his subject. Reading, Surfing and Blogging are the things he loves.

Ask your query

Be the First to Comment!

Notify of
avatar
wpDiscuz