Responsive image grid gallery

Responsive image grid gallery

Responsive image grid gallery

Place

Where

Peace

Responsive image grid gallery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive image grid gallery</title>

<style>
.image-zoom-container {
 list-style: none;
 font-size: 0px;
}
.zoom-container {
 position: relative;
 overflow: hidden;
 display: inline-block;
 width: 33.33%;
 font-size: 16px;
 font-size: 1rem;
 border: 1px solid #fff;
 vertical-align: top;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.zoom-container img {
 display: block;
 width: 100%;
 height: auto;
 -webkit-transition: all .5s ease; /* Safari and Chrome */
        -moz-transition: all .5s ease; /* Firefox */
        -ms-transition: all .5s ease; /* IE 9 */
        -o-transition: all .5s ease; /* Opera */
        transition: all .5s ease;
}
.zoom-container .zoom-caption {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 10;
 background: rgba(0, 0, 0, .5);
 -webkit-transition: all .5s ease; /* Safari and Chrome */
        -moz-transition: all .5s ease; /* Firefox */
        -ms-transition: all .5s ease; /* IE 9 */
        -o-transition: all .5s ease; /* Opera */
        transition: all .5s ease;
}
.zoom-container .zoom-caption h3 {
 display: block;
 text-align: center;
 font-family: 'Source Sans Pro', sans-serif;
 font-size: 1.5em;
 font-weight: 900;
 letter-spacing: -1px;
 text-transform: uppercase;
 color: #fff;
 margin: 23% 0 0;
 padding: 10px 0;
 border-top: 5px solid #333333;
 border-bottom: 5px solid #000000;
}
.zoom-container:hover img {
 -webkit-transform:scale(1.25); /* Safari and Chrome */
        -moz-transform:scale(1.25); /* Firefox */
        -ms-transform:scale(1.25); /* IE 9 */
        -o-transform:scale(1.25); /* Opera */
         transform:scale(1.25);
}
.zoom-container:hover .zoom-caption {
 background: none;
}
 
@media (max-width: 767px) {
 .zoom-container {
  width: 50%;
 }
}
 
@media (max-width: 480px) {
 .zoom-container {
  width: 100%;
 }
}
</style>
</head>

<body>

<div class="image-zoom-container">
 <div class="zoom-container">
  <a href="#">
   <span class="zoom-caption">
    <h3>Place</h3>
   </span>
   <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" />
  </a>
 </div>
 
 <div class="zoom-container">
  <a href="#">
   <span class="zoom-caption">
    <h3>Where</h3>
   </span>
   <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" />
  </a>
 </div>
 
 <div class="zoom-container">
  <a href="#">
   <span class="zoom-caption">
    <h3>Peace</h3>
   </span>
   <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" />
  </a>
 </div>
 
</div>

</body>
</html>

Comments