<h1>Hover over the kittehs</h1>
<div class="container">

  <div class="box">
    <div class="cover left">
      <h2 class="title">Example Post Title</h2>
      <p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
      <div class="btn"><a href="#">Read more...</a></div>
      <p class="date">10/19/2013</p>
    </div>
  </div>
<div class="box">
    <div class="cover right">
      <h2 class="title">Example Post Title</h2>
      <p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
      <div class="btn"><a href="#">Read more...</a></div>
      <p class="date">10/19/2013</p>
    </div>
  </div>
<div class="box">
    <div class="cover top">
      <h2 class="title">Example Post Title</h2>
      <p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
      <div class="btn"><a href="#">Read more...</a></div>
      <p class="date">10/19/2013</p>
    </div>
  </div>
<div class="box">
    <div class="cover bottom">
      <h2 class="title">Example Post Title</h2>
      <p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
      <div class="btn"><a href="#">Read more...</a></div>
      <p class="date">10/19/2013</p>
    </div>
  </div>
  
</div>
<div class="container">
  <div class="box">
    <div class="cover top-left">
      <h2 class="title">Example Post Title</h2>
      <p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
      <div class="btn"><a href="#">Read more...</a></div>
      <p class="date">10/19/2013</p>
    </div>
  </div>
  <div class="box">
    <div class="cover top-right">
      <h2 class="title">Example Post Title</h2>
      <p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
      <div class="btn"><a href="#">Read more...</a></div>
      <p class="date">10/19/2013</p>
    </div>
  </div>
  <div class="box">
    <div class="cover bottom-left">
      <h2 class="title">Example Post Title</h2>
      <p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
      <div class="btn"><a href="#">Read more...</a></div>
      <p class="date">10/19/2013</p>
    </div>
  </div>
  <div class="box">
    <div class="cover bottom-right">
      <h2 class="title">Example Post Title</h2>
      <p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
      <div class="btn"><a href="#">Read more...</a></div>
      <p class="date">10/19/2013</p>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Lobster+Two');
  
*{
  box-sizing: border-box;

}
html{
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background: url('https://s.cdpn.io/45816/noisy-bg.png')#7f8c8d;
}
h1{
  text-align: center;
  font-size: 48pt;
  font-family: 'Lobster Two', cursive;
  margin-top: 75px;
  color: #fff;
  text-shadow: -1px 1px 0px #000;
}
.container{
  font-family: Arial;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  box-lines: multiple;
}
.box{
  width: 250px;
  height: 200px;
  background: url('http://placekitten.com/250/200');
  overflow: hidden;
  margin: 5px;
  border: 1px solid #000;
  box-shadow: 0px 0px 15px 0px #666,
              0px 5px 15px 0px #000;
}
.cover{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  position: relative;
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
  padding: 1em;
  color: #fff;
  overflow: hidden;
  text-shadow: 1px 1px 0px #000;
}
.cover .title{
  font-size: 16pt;
  font-style: italic;
}
.box .cover .intro{
  line-height: 1.2em;
  height: 4.8em;
  width: 100%;
  position: relative;
  font-size: 10pt;
  overflow: hidden;
}
.cover .btn{
  padding: 0.5em 1em;
  margin: 0.5em;
  background: #0099cc;
  float: right;
  border-radius: 0.25em;
}
.btn a{
  color: #fff;
  text-decoration: none;
}
.cover .date{
  position: absolute;
  bottom: 1em;
  right: 1em;
  font-size: 10pt;
}
.box:hover .left{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
   left: 0px;
}
.box:hover .right{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
   right: 0px;
}
.box:hover .top{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
   top: 0px;
}
.box:hover .bottom{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
    bottom: 0px;
}
.box:hover .top-left{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
    top: 0px;
    left: 0px;
}
.box:hover .top-right{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
    top: 0px;
    right: 0px;
}
.box:hover .bottom-left{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
    bottom: 0px;
    left: 0px;
}
.box:hover .bottom-right{
  -webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
    bottom: 0px;
    right: 0px;
}
.left{
  left: -250px;
}
.right{
  right: -250px;
}
.top{
  top: -200px;
}
.bottom{
  bottom: -200px;
}
.top-left{
  top: -200px;
  left: -250px;
}
.top-right{
  top: -200px;
  right: -250px;
}
.bottom-left{
  bottom: -200px;
  left: -250px;
}
.bottom-right{
  bottom: -200px;
  right: -250px;
}
/* Ordering */
  .left{order:1;}
  .right{order:2;}
  .top{order:3;}
  .bottom{order:4;}
  .top-left{order:5;}
  .top-right{order:6;}
  .bottom-left{order:7;}
  .bottom-right{order:8;}

// Thanks placekitten.com for the kittehs

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js