<section id="main">
      <div class="frame">
      	<a href="#">
        	<span class="caption">
        		<h2>Man of Steel</h2>
            <p class="desc">Man of Steel is a 2013 American superhero film directed by Zack Snyder, produced by Christopher Nolan, and written by David S. Goyer. Based on the DC Comics character Superman, the film is a reboot of the Superman film series that portrays the character's origin story.</p>
        	</span>
          <img src="http://www.mackrichardson.com/dev/pixelspace/remote-images/man_of_steel.jpg">
        </a>
      </div>
      
      <div class="frame">
				<a href="#">
        	<span class="caption">
        		<h2>Spider-Man</h2>
            <p class="desc">Spider-Man is a fictional character, a comic book superhero that appears in comic books published by Marvel Comics. Created by writer-editor Stan Lee and writer-artist Steve Ditko, he first appeared in Amazing Fantasy #15 (cover-dated Aug. 1962).</p>
        	</span>
        	<img src="http://www.mackrichardson.com/dev/pixelspace/remote-images/spider_man.jpg"">
        	</a>
        </div>
      <div class="frame">
        <a href="#">
        	<span class="caption">
        		<h2>Atomic Robo</h2>
            <p class="desc">Atomic Robo is an American comic book series depicting the adventures of the eponymous character, a self-aware robot built by a fictional version of Nikola Tesla, created by 8-Bit Theater writer Brian Clevinger and artist Scott Wegener.</p>
        	</span>
      	<img src="http://www.mackrichardson.com/dev/pixelspace/remote-images/atomic_robo.jpg"">
        </a>  
      </div>
    </section>
* { 
-moz-box-sizing: border-box; 
box-sizing: border-box;
}

body {
  background: #0f0f0f url('https://subtlepatterns.com/patterns/low_contrast_linen.png') repeat 0 0;
}

#main {
	margin: 40px auto 10px auto;
  min-height: 400px;
  width: 960px;
}

.frame {
  float: left;
  height: 250px;
 	overflow: hidden;
  position: relative;
  width: 300px;
}

.frame a {
  display: block;
	height: 100%;
  width: 100%;
}

.frame img {
  display: block;
  height: auto;
  position: absolute;
  top: -125%;
  left: -50%;
	width: auto;
  z-index: 0;
}

.frame:nth-child(2) img {
  top: -90%;
  left: -70%;
}
.frame:nth-child(3) img {
  top: -90%;
}

.frame a .caption {
	background-color: rgba(0, 0, 0, 0.7);
	display: block;
  overflow: hidden;
  padding: 10px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 180px;
	transition-property: top;
  transition-duration: 0.2s;  
  width: 100%;  
  z-index: 10;
}

.frame a:hover .caption {
	top: 0;
  transition: all 2s;
}

.frame a .caption h2 {
  color: orange;
  font-size: 32px;
	margin-bottom: 20px;
}

.frame a .caption p {
  color: white;
  display: none;
  line-height: 150%;
  transition: all 0.2s;  
  width: 90%;
}

.frame a:hover .caption p {
  display: block;
  margin-bottom: 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js