Adaptive photo grid

<section class="super">

  <div class="wrp">

    <img src="http://myth.mtdemo.wpengine.com/wp-content/uploads/sites/28/2015/05/misty-trees-1600x1067.jpg">

    <article>

      <date>march 14, 2015</date>

      <h2>Misty Trees</h2>

      <button>more</button>

    </article>

  </div>

</section>

<section>

  <div class="wrp">

    <img src="http://myth.mtdemo.wpengine.com/wp-content/uploads/sites/28/2015/05/mountain-range-1600x1063.jpg">

    <article>

      <date>march 14, 2015</date>

      <h2>Misty Trees</h2>

      <button>more</button>

    </article>

  </div>

</section>

<section>

  <div class="wrp">

    <img src="http://myth.mtdemo.wpengine.com/wp-content/uploads/sites/28/2015/05/wide-open-road-1600x1067.jpg">

    <article>

      <date>march 14, 2015</date>

      <h2>Misty Trees</h2>

      <button>more</button>

    </article>

  </div>

</section>

<section>

  <div class="wrp">

    <img src="http://myth.mtdemo.wpengine.com/wp-content/uploads/sites/28/2015/05/getting-ready-1600x1065.jpg">

    <article>

      <date>march 14, 2015</date>

      <h2>Misty Trees</h2>

      <button>more</button>

    </article>

  </div>

</section>

<section>

  <div class="wrp">

    <img src="http://myth.mtdemo.wpengine.com/wp-content/uploads/sites/28/2015/05/lets-escape-1600x1067.jpg">

    <article>

      <date>march 14, 2015</date>

      <h2>Misty Trees</h2>

      <button>more</button>

    </article>

  </div>

</section>

<section>

  <div class="wrp">

    <img src="http://myth.mtdemo.wpengine.com/wp-content/uploads/sites/28/2014/05/gallery-1-1600x1064.jpg">

    <article>

      <date>march 14, 2015</date>

      <h2>Misty Trees</h2>

      <button>more</button>

    </article>

  </div>

</section>

<section>

  <div class="wrp">

    <img src="http://myth.mtdemo.wpengine.com/wp-content/uploads/sites/28/2014/05/gallery-4-1600x1066.jpg">

    <article>

      <date>march 14, 2015</date>

      <h2>Misty Trees</h2>

      <button>more</button>

    </article>

  </div>

</section>

<section>

  <div class="wrp">

    <img src="http://myth.mtdemo.wpengine.com/wp-content/uploads/sites/28/2014/05/video-1600x1067.jpg">

    <article>

      <date>march 14, 2015</date>

      <h2>Misty Trees</h2>

      <button>more</button>

    </article>

  </div>

</section>

<section>

  <div class="wrp">

    <img src="http://myth.mtdemo.wpengine.com/wp-content/uploads/sites/28/2014/05/gallery-1-1600x1064.jpg">

    <article>

      <date>march 14, 2015</date>

      <h2>Misty Trees</h2>

      <button>more</button>

    </article>

  </div>

</section>

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Caption);

* {

  margin: 0;

}

html, body {

  width: 100%;

  height: 100%;

  font-family: 'PT Sans Caption', sans-serif;

  color: #333;

}

h1, h2, h3, h4, h5, h6 {

  font-family: 'Garamond', serif;

}

section {

  float: left;

  display: table;

  width: 100%;

  min-height: 300px;

  background-image: url();

  background-size: cover;

  transition: width .4s;

}

@media screen and (min-width: 600px) {

  section {

    width: 50%;

  }

}

@media screen and (min-width: 1024px) {

  section {

    width: 33%;

  }

}

.wrp {

  position: relative;

  display: table-cell;

  vertical-align: middle;

  text-align: center;

}

section img {

  position: absolute;

  left: 0;

  top: 0;

  z-index: -1;

  width: 99%;

  height: 99%;

  object-fit: cover;

}

article {

  display: inline-block;

  padding: 40px 20px;

  width: 60%;

  height: 60%;

  opacity: 0;

  visibility: hidden;  

  background-color: rgba(255, 255, 255, .9);

  outline: 7px solid rgba(255, 255, 255, .5);

  transition: opacity .4s;

  will-change: opacity, visibility;

}

section:hover article {

  opacity: 1;

  visibility: visible;

}

article date {

  font-size: .8rem;

  font-weight: 300;

  text-transform: uppercase;

  color: #666;

}

article h2 {

  margin-bottom: 10px;

  font-weight: 300;

  font-style: italic;

}

article button {

  padding: 8px 12px;

  border: 2px solid #333;

  background: linear-gradient(#333, #333);

  background-repeat: no-repeat;

  background-size: 0% 100%;

  text-transform: uppercase;

  color: #333;

  transition-property: color, background-size;

  transition-duration: .2s;

  will-change: background-size;

}

article button:hover {

  background-size: 100% 100%;

  color: #fff;

}

'use strict';

var urlPrefix = 'http://myth.mtdemo.wpengine.com/wp-content/uploads/sites/28/2015/05/',

    imgs = [

        'misty-trees-1600x1067.jpg'

    ],

    section = document.createElement('section'),

    wrapper = document.createElement('div'),

    article = document.createElement('article'),

    date = document.createElement('date'),

    header = document.createElement('header'),

    button = document.createElement('button');

template.appendChild(document.createElement('div').classList.add());

imgs.forEach(function (item) {

});