<img> slides up on hover to reveal hidden data

Tuts Library »

The Finished Product

Putting the transition property to work creating this cool simple <IMaGe>slider.


Pallet Knife Painting

Unknown Artist


Vector Rays

Unknown Artist


Finger Painting

Unknown Artist

How It's Done


<div class="col-lg-4">
        <img src="img/photo3.png" alt="">
           <p ><a href="#">Finger Painting Art</a></p>
           <p class="text-muted">Personal Art</p>
           <div class="caption-btns">
              <a class="btn btn-default btn-sm" href="img/photo3.jpg"><i class="glyphicon glyphicon-zoom-in"></i> View Larger</a>

First we need to configure the figure <div>. Important to include overflow: hidden; Otherwise the figcaption will be visible. Not what we want.


figure {
   width: 100%;
   height: 275px;
   margin: 25px auto;
   border: 1px solid  #772953;  /* darker color #511c39  */  /*  highlighter  #c53153 (glyphicons) */
   box-shadow: 0px 1px 4px rgba(119, 41, 83, 1), 0px 0px 40px rgba(119, 41, 83, 0.1) inset;
   border-radius: 6px;
   overflow: hidden;

Next we configure the <img>. Notice this is where we place the transition

figure img {
   position: relative;
   width: 100%;
   height: 273px;
   transition: 0.4s ease;
   -webkit-transition: 0.4s ease; 

The figcaption is configured. Notice we set the opacity to 1. The figcaption is hidden by the previous overflow setting above

figcaption {
   position: relative;
   height: 120px;
   background-color: #ffffff;
   text-align: center;
   opacity: 1;

Where the transition is invoked. When hovering over the <img> the <margin-top> is re-set to -120px forcing the <img> to slide up to reveal the figcaption <div>

figure:hover img{
   margin-top: -120px;