CS - IMaGe SLIDER

The Finished Product

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

How It's Done

HTML

<div class="col-lg-4">
  <div>
     <figure>
        <img src="img/photo3.png" alt="">
        <figcaption>
           <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>
           </div>
        </figcaption>
     </figure>
  </div>
</div>

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

CSS

figure {
   width: 100%;
   height: 275px;
   margin: 25px auto;
   border: 1px solid  #772953;
   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;
}

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;
}