CodePen

HTML

            
              <div class="wrapper">
  <div class="thumb-grid">
    
 
    
     <div class="thumb">
      <a href="#" class="image">
        <div class="image-pos">
          <img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
        </div>
      </a>
      <div class="details">
         <h5>Image Title</h5>
      </div>
    </div>
    
     <div class="thumb">
      <a href="#" class="image">
        <div class="image-pos">
          <img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
        </div>
      </a>
      <div class="details">
         <h5>Image Title</h5>
      </div>
    </div>
    
      <div class="thumb">
      <a href="#" class="image">
        <div class="image-pos">
          <img src="http://images.weserv.nl/?url=static.living.is/gallery/original/016e551de2f53d58e7f4acd68279e6a1.JPG&il&w=600" />
        </div>
      </a>
      <div class="details">
         <h5>Image Title</h5>
      </div>
    </div>
    
    
    
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .wrapper {
  width: 600px;
  margin: 30px auto 0
}

.thumb-grid {
  text-align: justify;
}

.thumb-grid:after {
		content: '';
		display: inline-block;
		width: 100%;
}

.thumb {
		position: relative;
		display: inline-block;
		width: 31.5%;
		height: 0;
		padding-top: 29%;
		margin-bottom: 6%;
}

.image {
	height: 73%;
	overflow: hidden;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
  vertical-align: top;
  display: block;
  border: 1px solid #eee;
}

.image-pos {
    height: 100%;
    left: 50%;
    margin-left: -300px;
    position: absolute;
    text-align: center;
    width: 600px;
}

.image-pos img {
  height: 100%;
  max-height: 100%;
  min-height: 100%;
  max-width: none;
  width: auto;
  display: inline;
  border: 0;
}

.details {
  height: 27%;
  position: absolute;
  top: 73%;
}

.details h5 {
  margin: 0;
  padding-top: 5px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................