index.html

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,900' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <a class="post" href="#"><div class="col-md-4">
      <div class="inner">
        <p class="category">News <span class="date"><i class="fa fa-clock-o"></i>2014.11.19</p>
        <h2>World Poverty Statistics Reach High</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit justo ex, vel scelerisque magna volutpat ut. Nunc ultrices facilisis orci, pulvinar gravida orci mattis quis.</p>
        <a class="read-more" href="#">Read More</a>
      </div>   
      </div></a>
    <a class="post" href="#"><div class="col-md-4">
      <div class="inner">
        <p class="category">Sports <span class="date"><i class="fa fa-clock-o"></i>2014.11.23</p>
        <h2>That Nfl dude knocked that chick</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit justo ex, vel scelerisque magna volutpat ut. Nunc ultrices facilisis orci, pulvinar gravida orci mattis quis.</p>
        <a class="read-more" href="#">Read More</a>
      </div>   
      </div></a>
    <a class="post" href="#"><div class="col-md-4">
      <div class="inner">
        <p class="category">Life <span class="date"><i class="fa fa-clock-o"></i>2014.11.29</p>
        <h2>How to be a codepen boss, code like a pro</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit justo ex, vel scelerisque magna volutpat ut. Nunc ultrices facilisis orci, pulvinar gravida orci mattis quis.</p>
        <a class="read-more" href="#">Read More</a>
      </div>   
      </div></a>
    <a class="post" href="#"><div class="col-md-4">
      <div class="inner">
        <p class="category">Crime <span class="date"><i class="fa fa-clock-o"></i>2014.11.31</p>
        <h2>hide your kids, hide your wifes</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit justo ex, vel scelerisque magna volutpat ut. Nunc ultrices facilisis orci, pulvinar gravida orci mattis quis.</p>
        <a class="read-more" href="#">Read More</a>
      </div>   
      </div></a>
    <a class="post" href="#"><div class="col-md-4">
      <div class="inner">
        <p class="category">Daily <span class="date"><i class="fa fa-clock-o"></i>2014.10.28</p>
        <h2>recent studies prove iphone 6 is bullshit</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit justo ex, vel scelerisque magna volutpat ut. Nunc ultrices facilisis orci, pulvinar gravida orci mattis quis.</p>
        <a class="read-more" href="#">Read More</a>
      </div>   
      </div></a>
    <a class="post" href="#"><div class="col-md-4">
      <div class="inner">
        <p class="category">History<span class="date"><i class="fa fa-clock-o"></i>2014.10.26</p>
        <h2>aliens are really true, The in-depth story</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit justo ex, vel scelerisque magna volutpat ut. Nunc ultrices facilisis orci, pulvinar gravida orci mattis quis.</p>
        <a class="read-more" href="#">Read More</a>
      </div>   
      </div></a>
    <a class="post" href="#"><div class="col-md-4">
      <div class="inner">
        <p class="category">Breakthrough <span class="date"><i class="fa fa-clock-o"></i>2014.10.19</p>
        <h2>charge your phone in 15 seconds</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit justo ex, vel scelerisque magna volutpat ut. Nunc ultrices facilisis orci, pulvinar gravida orci mattis quis.</p>
        <a class="read-more" href="#">Read More</a>
      </div>   
      </div></a>
    <a class="post" href="#"><div class="col-md-4">
      <div class="inner">
        <p class="category">World <span class="date"><i class="fa fa-clock-o"></i>2014.10.10</p>
        <h2>1 can a day, keeps the hiv away</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit justo ex, vel scelerisque magna volutpat ut. Nunc ultrices facilisis orci, pulvinar gravida orci mattis quis.</p>
        <a class="read-more" href="#">Read More</a>
      </div>   
      </div></a>
    <a class="post" href="#"><div class="col-md-4">
      <div class="inner">
        <p class="category">Tech <span class="date"><i class="fa fa-clock-o"></i>2014.11.2</p>
        <h2>Refreshing New Blog Formats</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit justo ex, vel scelerisque magna volutpat ut. Nunc ultrices facilisis orci, pulvinar gravida orci mattis quis.</p>
        <a class="read-more" href="#">Read More</a>
      </div>   
      </div></a>
    
    
  </div>
</div>

Responsive-Blog-Grid.markdown

Responsive Blog Grid

A fully responsive blog grid using pure css and a little bit of magic!

A Pen by Scott Marshall on CodePen.

License.

script.js

$(".col-md-4").mouseover(function(){
  $(this).find("h2").css("color","#F26743");
  $(this).find(".read-more").removeClass("flyIn");
  $(this).find(".read-more").addClass("fly");
  
}).mouseout(function(){
  $("h2").css("color","#fff");
  $(this).find(".read-more").removeClass("fly");
  $(this).find(".read-more").addClass("flyIn");
});

style.scss

/*SO MANY POSSIBILITIES FOR HOVER EFFECTS!!!!!!!!!!!!!!!!!!!!!*/
body{
  padding:50px 0px 50px 0px;
  -webkit-font-smoothing: antialiased;
  background:rgba(58, 68, 78,1);
}


.fly{
  -webkit-transform:translateX(-200px);
    -webkit-transition:0.4s;
  -moz-transition:0.4s;
  -o-transition:0.4s;
  -ms-transition:0.4s;
  transition:0.4s;
}

.flyIn{
  -webkit-transform:translateX(0px);
    -webkit-transition:0.4s;
  -moz-transition:0.4s;
  -o-transition:0.4s;
  -ms-transition:0.4s;
  transition:0.4s;
}

.col-md-4:hover{
  background:#f7f7f7;
  -webkit-transition:0.4s;
  -moz-transition:0.4s;
  -o-transition:0.4s;
  -ms-transition:0.4s;
  transition:0.4s;
  -webkit-transform:translateX(20px);
  -moz-transform:translateX(20px);
  -o-transform:translateX(20px);
  -ms-transform:translateX(20px);
  transform:translateX(20px);
  position:relative;
  z-index:5000;
}

.post:hover{
text-decoration:none;
}

.fa{
  margin-right:5px;
}

.col-md-4{
  height:auto;
  overflow:hidden;
  background:#2A3138;
  border:1px solid #1e2328;
  position:relative;
  z-index:0;
  .inner{
    padding:20px;
    .category{
      color:#F26743;
      font:900 13px Lato;
      text-transform:uppercase;
    }
    .date{
      font:900 13px Lato;
      color:#9b9eab;
      margin-left:5px;
    }
    h2{
      font:900 24px Lato;
      text-transform:uppercase;
      margin-bottom:18px;
      color:#fff;
    }
    p{
      font:400 14px Lato;
      line-height:22px;
      color:#9b9eab;
    }
    
    .read-more{
      color:#F26743;
      display:block;
      font:900 13px Lato;
      position:relative;
      text-transform:uppercase;
    }
    
    .read-more:hover{
      text-decoration:none;
    }
  }
}

a:active,a:focus{
  color:#F26743;
  text-decoration:none;
}