/*
use case
-----------------------------
<div class="grid-line">
   <div class="item tall shift0">
     <a class="link" href="#">
       <div class="hovercontent">
         <h1>JETSETTER</h1>
         <h3>Designed by Big Human</h3>
       </div>
       <img src="images/1.png">
     </a>
   </div>
  <div class="item shift0">
    <a class="link" href="#">
      <div class="hovercontent">
        <h1>FAME</h1>
        <h3>This app got shut down by Twitter</h3>
      </div>
      <img src="images/2.png">
    </a>
  </div>
</div>
*/
.grid-line {
  width: 100%;
  font-size: 0;
  text-align: left;
  background: #222;
  column-gap: 2px;
  -moz-column-gap: 2px;
  -webkit-column-gap: 2px;
  border: 0;
  padding: 0;
  margin: 0;
}
.grid-line *{
  border: 0;
  padding: 0;
  margin: 0;
}
.grid-line .item {
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  line-height: 0;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out;
  -o-transition: -o-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
/* 2-GRID */
@media screen and (min-width: 600px) {
  .grid-line {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
  .grid-line .item > a {
    height: 50%;
  }
}
/* 3-GRID */
@media screen and (min-width: 900px) {
  .grid-line {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
  .grid-line .item > a {
    height: 50%;
  }
  .grid-line .item.tall {
    margin-bottom: -16.7%;
  }
}
/* 4-GRID */
@media screen and (min-width: 1200px) {
  .grid-line {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
  .grid-line .item > a {
    height: 25%;
  }
  .grid-line .item.tall {
    margin-bottom: -12.6%;
  }
}

.grid-line h1,
h2 {
  color: whiteSmoke;
  text-shadow: 1px 1px 2px black;
}
.grid-line h1 {
  font-family: "Gill Sans", sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  margin: 0.75em 0.75em 0.25em;
}
.grid-line h2 {
  font-family: "Gill Sans", sans-serif;
  font-weight: 200;
  margin-left: 1.5em;
  margin-top: 0.33em;
}
.grid-line a {
  color: #aaa;
  text-decoration: none;
}
.grid-line .hovercontent h1 {
  color: white;
  font-size: 1.5em;
  margin-top: 40%;
}
.grid-line .hovercontent h3 {
  color: #a1a1a1;
  font-weight: 100;
}
.grid-line {
  display: block;
  /* my favorite display attribute */
  box-shadow: 0 -1px 5px #111;
}
.grid-line .item img {
  position: relative;
  z-index: 4;
  width: 100%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  /* This is what was making it slow! booooooo */
  -webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.2s ease-out;
  -moz-transition: opacity 0.3s ease-out, -moz-transform 0.2s ease-out;
  -o-transition: opacity 0.3s ease-out, -o-transform 0.2s ease-out;
  transition: opacity 0.3s ease-out, transform 0.2s ease-out;
}
.grid-line .item .link {
  display: block;
  height: 100%;
}
.grid-line .hovercontent {
  position: absolute;
  z-index: 5;
  font-family: "Helvetica", Arial, sans-serif;
  text-align: center;
  width: 100%;
  height: 100%;
  background: #222222;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  line-height: 24px;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -moz-transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);
  -o-transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);
  -webkit-transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);
  transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);
  -webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-out, -moz-transform 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-out, -o-transform 0.2s ease-in-out;
  transition: opacity 0.2s ease-out, transform 0.2s ease-in-out;
}
.grid-line .item .link:hover .hovercontent {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  -o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}