hammer time grid special

01_hammer.haml

%ul
  %li{style: "background-image: #{dynamic_image}"}>
    = link_to :article_url do
      %span.caption "Yanul Kabak brings to Afgan children... "
      %span.details
        Yanul Kabak brings to Afgan children
        %small 
          The panel says it has 1,000 pages of evidence showing
          Lance Armstrong's role in a...
        %span.read-more
          Read More

02_hammer.scss

$frame-size: 200px;
$read-more-line-height: 24px;//a guess fill it in as needed
$read-more-font-size: 16px;//a guess fill it in as needed

li {
  display: inline-block;
  position: relative;
  height: $frame-size;
  width: $frame-size;
  margin: 0 10px;
  border: 5px solid #fff;
  box-shadow: 0 1px 3px 0 rgba(0,0,0, .4);
  background-color: red;
  //these handle the bg-image
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  a, .details { 
    display: block; 
    height: 100%;
    width: 100%; }

  .caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0; 
    background: rgba(0,0,0, .6); }

  .details { 
    display: none; 
    padding: 20px;
    background: rgba(0,0,0, .5); }

  .read-more {
    font-size: $read-more-font-size;
    line-height: $read-more-line-height;
    &:before { 
      content: "";
      display: inline-block;
      height: $read-more-line-height; 
      width: $read-more-line-height; 
      margin-right: 1em;
      background: url("arrow-image-thingy") center center no-repeat;
      background-size: contain; }
  }

  //----------------------------
  // the li hover state
  &:hover {
    .caption { display: none; }
    .details { display: block; }
  }//&:hover
}//li

03_ellipsis_options

# Ellipsis options:
# 1: 
# Truncate the text server side. That makes it easier.
# Multi-line ellipsis are js HEAVY and very very nasty.  
# Multi-line ellipsis killed performance at ACE.

# 2:
# Single line and CSS ellipsis
# http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

new.html

<ul class="row">
  <li class="span3 article-tile">
    <a href="/test:article" class="article-tile-inside">
        <img src="http://localhost:9292/BAhbCFsHOgZmSSI4aW1hZ2VzL2FuLWltYWdlODU5YWQxZmVmN2YwZmNkNTZmNDYxZGJjNjk2N2QyZTMucG5nBjoGRVRbCDoGcDoKdGh1bWJJIg0yNjB4MjYwIwY7BkZbBzsHOgpzdHJpcA?sha=4c75b037" alt="">
      <div class="article-tile-overlay">
        <div class="article-tile-caption">test234</div>
        <div class="article-tile-leadin">test</div>
        <div class="article-tile-readmore">Read More</div>
      </div>
</a>  </li>
</ul>

new.scss

$red: #b61c26;
$white: white;

@mixin blur($blur-amount) {
  -webkit-filter: blur($blur-amount);
     -moz-filter: blur($blur-amount);
      -ms-filter: blur($blur-amount);
       -o-filter: blur($blur-amount);
          filter: blur($blur-amount);
}

.article-tile {
  height: 200px;
  width: 200px;
  background-color: $white;
  border: #ccc solid thin;
  color: $white;
  @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.1));

  .article-tile-caption {
    font-size: 13px;
    font-weight: bold;
  }

  .article-tile-leadin {
    line-height: 16px;
    padding-top: 10px;
  }

  .article-tile-readmore {
    color: $white;
    font-weight: bold;
    height: 14px;
    line-height: 14px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    &:before {
      content: '';
      display: inline-block;
      background-image: url(/assets/glyphicons-halflings-white.png);
      background-position: -240px -144px;
      height: 14px;
      line-height: 14px;
      width: 14px;
      margin-top: 2px;
      vertical-align: bottom;
    }
  }

  .article-tile-inside {
    margin: 5px;
    color: $white;
    display: block;
    background-color: $red;
    position: relative;
    height: 190px;
    img { @include box-sizing(border-box); }
    overflow: hidden;
  }

  .article-tile-overlay {
    @include box-sizing(border-box);
    position: absolute;
    bottom: 0;
    padding: 20px;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    .article-tile-leadin { display: none; }
    .article-tile-readmore { display: none; }
  }

  &:hover {
    img { @include blur(5px); }
    .article-tile-caption { font-size: 16px; }
    .article-tile-overlay {
      top: 0;
      height: 100%;
      .article-tile-leadin { display: block; }
      .article-tile-readmore { display: inline-block; }
    }
  }
}

ours.erb

<div class='row'>
<% articles.take(3).each do |article| %>
  <div class='span3 article-tile'>
    <div class='article-tile-inside'>
      <% if image = article.sorted_images.first %>
        <a href="<%= @page.get_article_url(article._id) %>"><img src="<%= hermes_image_url(image.cloud_file_key, width: 260, height: 260) %>" alt="<%= image.caption %>" /></a>
      <% end %>
      <div class='article-tile-overlay'>
        <div class='article-tile-caption'><%= truncate(article.headline, length: 50) %></div>
        <div class='article-tile-leadin'><%= truncate(article.summary, length: 80) %></div>
        <a href="<%= @page.get_article_url(article._id) %>" class='article-tile-readmore' >
          <i class='icon-circle-arrow-right icon-white'>&nbsp;</i>
          <span class='article-tile-readmore-text'>Read More</span>
        </a>
      </div>
    </div>
  </div>
<% end %>
</div>

ours.scss

$red: #b61c26;
$white: white;

@mixin blur($blur-amount) {
  -webkit-filter: blur($blur-amount);
     -moz-filter: blur($blur-amount);
      -ms-filter: blur($blur-amount);
       -o-filter: blur($blur-amount);
          filter: blur($blur-amount);
}

.article-tile {
  height: 200px;
  width: 200px;
  background-color: $white;
  border: #ccc solid thin;
  color: $white;
  @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.1));

  .article-tile-caption {
    font-size: 13px;
    font-weight: bold;
  }

  .article-tile-leadin {
    line-height: 16px;
    padding-top: 10px;
  }

  .article-tile-readmore {
    color: $white;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    bottom: 20px;
    right: 20px;
  }

  .article-tile-inside {
    margin: 5px;
    background-color: $red;
    position: relative;
    height: 190px;
    img { @include box-sizing(border-box); }
    overflow: hidden;
  }

  .article-tile-overlay {
    @include box-sizing(border-box);
    position: absolute;
    bottom: 0;
    padding: 20px;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    .article-tile-leadin { display: none; }
    .icon-circle-arrow-right { display: none; }
    .article-tile-readmore { display: none; }
  }

  &:hover {
    img { @include blur(5px); }
    .article-tile-caption { font-size: 16px; }
    .article-tile-overlay {
      top: 0;
      height: 100%;
      .article-tile-leadin { display: block; }
      .article-tile-readmore { display: block; }
      .icon-circle-arrow-right { display: inline-block; }
    }
  }
}