Cacher is the code snippet organizer for pro developers

<div class="thumbs">
		<div class="row">
			<div class="four columns thumb">
				<img src="https://unsplash.it/300/200?image=123
				" alt="">
				<div class="img-caption">
				<h3>Cool image</h3>
				<span>unsplash</span>
				<a href="https://unsplash.it/">Take a look</a>
			</div>
			</div>
 
			
			<div class="four columns thumb">
				<img src="https://unsplash.it/300/200?image=31
				" alt="">
				<div class="img-caption">
				<h3>Cool image</h3>
				<span>unsplash</span>
				<a href="https://unsplash.it/">Take a look</a>
			</div>
			</div>
 
 
			<div class="four columns thumb">
				<img src="https://unsplash.it/300/200?image=120
				" alt="">
				<div class="img-caption">
				<h3>Cool image</h3>
				<span>unsplash</span>
				<a href="https://unsplash.it/">Take a look</a>
			</div>
			</div>
		</div>
<!-- second row -->
		<div class="row">
			<div class="four columns thumb">
				<img src="https://unsplash.it/300/200?image=173
				" alt="">
				<div class="img-caption">
				<h3>Cool image</h3>
				<span>unsplash</span>
				<a href="https://unsplash.it/">Take a look</a>
			</div>
			</div>
 
			
			<div class="four columns thumb">
				<img src="https://unsplash.it/300/200?image=139
				" alt="">
				<div class="img-caption">
				<h3>Cool image</h3>
				<span>unsplash</span>
				<a href="https://unsplash.it/">Take a look</a>
			</div>
			</div>
 
 
			<div class="four columns thumb">
				<img src="https://unsplash.it/300/200?image=231
				" alt="">
				<div class="img-caption">
				<h3>Cool image</h3>
				<span>unsplash</span>
				<a href="https://unsplash.it/">Take a look</a>
			</div>
			</div>
		</div>
<!-- third row -->
		<div class="row">
			<div class="four columns thumb">
				<img src="https://unsplash.it/300/200?image=421
				" alt="">
				<div class="img-caption">
				<h3>Cool image</h3>
				<span>unsplash</span>
				<a href="https://unsplash.it/">Take a look</a>
			</div>
			</div>
 
			
			<div class="four columns thumb">
				<img src="https://unsplash.it/300/200?image=441
				" alt="">
				<div class="img-caption">
				<h3>Cool image</h3>
				<span>unsplash</span>
				<a href="https://unsplash.it/">Take a look</a>
			</div>
			</div>
 
 
			<div class="four columns thumb">
				<img src="https://unsplash.it/300/200?image=232
				" alt="">
				<div class="img-caption">
				<h3>Cool image</h3>
				<span>unsplash</span>
				<a href="https://unsplash.it/">Take a look</a>
			</div>
			</div>
		</div>
</div>

// thumbs
.thumb{
  position: relative;
  overflow: hidden;
    img{
      position: relative;
      width: 100%; 
      transition: transform 0.4s;

      &:hover{
        transform: translateY(-50px);
}
}
    .img-caption{
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px;
        background: #000;
        color: orange;
        height: 100px;
        width: 100%;
        top: auto;
        bottom: 0;
        opacity: 0;
        transform: translateY(100%);
        transition: transform 0.4s, opacity 0.1s 0.3s;

        h3{
          margin: 0;
          padding: 0;
          color: #fff;
          font-size: 2rem;
}
  
        span:before {
          content: 'by ';
}
        a {
          text-align: center;
          padding: 5px 10px;
          border-radius: 2px;
          display: inline-block;
          background: orange;
          color: #fff;
          position: absolute;
          bottom: 20px;
          right: 20px;
}
}
}

.thumb:hover .img-caption{
  opacity: 1;
  transform: translateY(0px);
  transition: transform 0.4s, opacity 0.1s;
} 

.thumb{
  width: 100%;
  opacity: 0;
  transform: translateX(20px);
  -webkit-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
}