Masonry

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType!= &quot;item&quot;'>

<style type='text/css'>

.post{

  height:auto;

  width:31%;

  display:inline-block;

  text-decoration:none;

  float:left;

  margin:0 1.1% 2%;

  padding:0!important;

  }

  

  h3.post-title a{

  font-family: Arial;

  font-size: 20px;

  text-transform:uppercase;

  color:#fff;

  padding:0;

  text-shadow:2px 2px 3px #222

  }

  

  h3.post-title{

  height:22px;

  text-align:center;

  position:absolute;

  top:1%;

  width:100%;

  z-index:101;

  overflow:hidden;

  margin:0!important;

  padding:10px 0

  }

  

  .date-header{

  visibility:hidden;

  height:0!important;

  width:0!important;

  margin:0!important;

  padding:0!important;

  }

  

  .posts-thumb{

  width:100%;

  height:190px;

  overflow:hidden;

  position:relative;

  }

  

  .post-body{

  position:relative;

  overflow:hidden;

  }

  

  .post-body a{

  text-decoration:none;

  }

  

  .posts-thumb img{

  position:absolute;

  left:-100%;

  right:-100%;

  top:-100%;

  bottom:-100%;

  margin:auto;

  width:auto;

  max-width:340px;

  height:auto;

  padding:0;

  border:none;

  outline:none;

  }

  

  .post-summary-text{

  cursor:pointer;

  background-color:rgba(44,77,163,0.8);

  color:#fff;

  font:108% &#39;Open Sans Condensed&#39;,sans-serif;

  overflow:hidden;

  padding:45px 10px 0;

  left:0;position:absolute;

  text-align:center;

  text-shadow:1px 1px 0 rgba(0,0,0,0.1);

  top:0;

  opacity:0;

  height:100%;

  transition:all 300ms ease-out 0s;

  }

  

  .post-summary-text:hover{

  opacity:1;

  z-index:10;

  }

  

  a.comment-bubble{

  display:hide;

  color:#fff;

  text-decoration:none;

  font:104% &#39;Pacifico&#39;,cursive;

  width:100%;

  text-align:center;

  position:absolute;

  top:160px;

  left:0;

  text-shadow:1px 2px 1px #333;

  z-index:11;

  }

  

  a.comment-bubble:before{content:&quot;Comments: &quot;}.post-header,.post-footer{display:none}