Generated by SassMeister.com.

SassMeister-input-HTML.haml

-['nature','city','cats','people','transport'].each do |theme|
    .diamonds
        -(1..6).each do |i|
            .diamond
                %a{:href => "http://lorempixel.com/300/200/#{theme}/#{i}/"}
                    %img{:src => "http://lorempixel.com/300/200/#{theme}/#{i}/"}

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

@import "compass";

$rad: 57.2957795deg;

$iw: 300px;
$ih: 200px;

$c: sqrt(pow($ih/2,2)+pow($iw / 2,2));
$alpha: 90deg - (2 * acos($iw / (2 * $c)) ) * $rad;
$beta: 90deg - $alpha;

body {
  overflow-x: hidden;  
}

.diamonds {
  width: 200%;
  height: $ih;
  margin-left: - $iw;
  margin-top: - $ih / 2;

  &:nth-child(2n){
    margin-left: - $iw / 2;
  }
  
  & img:hover {
    opacity: 1;
  }
}

body:hover img{
  opacity: 0.5;
}

.diamond {
  position: relative;
  display: inline-block;
  width: round($c);
  height: round($c);
  
  margin-left: round($iw - $c - 5px);
  
  overflow: hidden;
  @include transform(rotate(-$beta/2) skewX($alpha) scaleY(cos($alpha)));
}

img {
  position: absolute;
  width: $iw;
  height: $ih;
  top: 50%;
  left: 50%;
  margin-left: - $iw/2;
  margin-top: - $ih/2;
  @include transform( scaleY(1/cos($alpha)) skewX(-$alpha) rotate($beta/2));

  @include transition(opacity ease-in-out 0.5s);
}

SassMeister-output.css

body {
  overflow-x: hidden;
}

.diamonds {
  width: 200%;
  height: 200px;
  margin-left: -300px;
  margin-top: -100px;
}
.diamonds:nth-child(2n) {
  margin-left: -150px;
}
.diamonds img:hover {
  opacity: 1;
}

body:hover img {
  opacity: 0.5;
}

.diamond {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 180px;
  margin-left: 115px;
  overflow: hidden;
  -moz-transform: rotate(-33.69007deg) skewX(22.61986deg) scaleY(0.92308);
  -ms-transform: rotate(-33.69007deg) skewX(22.61986deg) scaleY(0.92308);
  -o-transform: rotate(-33.69007deg) skewX(22.61986deg) scaleY(0.92308);
  -webkit-transform: rotate(-33.69007deg) skewX(22.61986deg) scaleY(0.92308);
  transform: rotate(-33.69007deg) skewX(22.61986deg) scaleY(0.92308);
}

img {
  position: absolute;
  width: 300px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -100px;
  -moz-transform: scaleY(1.08333) skewX(-22.61986deg) rotate(33.69007deg);
  -ms-transform: scaleY(1.08333) skewX(-22.61986deg) rotate(33.69007deg);
  -o-transform: scaleY(1.08333) skewX(-22.61986deg) rotate(33.69007deg);
  -webkit-transform: scaleY(1.08333) skewX(-22.61986deg) rotate(33.69007deg);
  transform: scaleY(1.08333) skewX(-22.61986deg) rotate(33.69007deg);
  -moz-transition: opacity ease-in-out 0.5s;
  -o-transition: opacity ease-in-out 0.5s;
  -webkit-transition: opacity ease-in-out;
  -webkit-transition-delay: 0.5s;
  transition: opacity ease-in-out 0.5s;
}

SassMeister-rendered.html

<div class='diamonds'>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/nature/1/'>
      <img src='http://lorempixel.com/300/200/nature/1/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/nature/2/'>
      <img src='http://lorempixel.com/300/200/nature/2/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/nature/3/'>
      <img src='http://lorempixel.com/300/200/nature/3/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/nature/4/'>
      <img src='http://lorempixel.com/300/200/nature/4/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/nature/5/'>
      <img src='http://lorempixel.com/300/200/nature/5/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/nature/6/'>
      <img src='http://lorempixel.com/300/200/nature/6/'>
    </a>
  </div>
</div>
<div class='diamonds'>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/city/1/'>
      <img src='http://lorempixel.com/300/200/city/1/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/city/2/'>
      <img src='http://lorempixel.com/300/200/city/2/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/city/3/'>
      <img src='http://lorempixel.com/300/200/city/3/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/city/4/'>
      <img src='http://lorempixel.com/300/200/city/4/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/city/5/'>
      <img src='http://lorempixel.com/300/200/city/5/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/city/6/'>
      <img src='http://lorempixel.com/300/200/city/6/'>
    </a>
  </div>
</div>
<div class='diamonds'>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/cats/1/'>
      <img src='http://lorempixel.com/300/200/cats/1/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/cats/2/'>
      <img src='http://lorempixel.com/300/200/cats/2/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/cats/3/'>
      <img src='http://lorempixel.com/300/200/cats/3/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/cats/4/'>
      <img src='http://lorempixel.com/300/200/cats/4/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/cats/5/'>
      <img src='http://lorempixel.com/300/200/cats/5/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/cats/6/'>
      <img src='http://lorempixel.com/300/200/cats/6/'>
    </a>
  </div>
</div>
<div class='diamonds'>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/people/1/'>
      <img src='http://lorempixel.com/300/200/people/1/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/people/2/'>
      <img src='http://lorempixel.com/300/200/people/2/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/people/3/'>
      <img src='http://lorempixel.com/300/200/people/3/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/people/4/'>
      <img src='http://lorempixel.com/300/200/people/4/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/people/5/'>
      <img src='http://lorempixel.com/300/200/people/5/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/people/6/'>
      <img src='http://lorempixel.com/300/200/people/6/'>
    </a>
  </div>
</div>
<div class='diamonds'>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/transport/1/'>
      <img src='http://lorempixel.com/300/200/transport/1/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/transport/2/'>
      <img src='http://lorempixel.com/300/200/transport/2/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/transport/3/'>
      <img src='http://lorempixel.com/300/200/transport/3/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/transport/4/'>
      <img src='http://lorempixel.com/300/200/transport/4/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/transport/5/'>
      <img src='http://lorempixel.com/300/200/transport/5/'>
    </a>
  </div>
  <div class='diamond'>
    <a href='http://lorempixel.com/300/200/transport/6/'>
      <img src='http://lorempixel.com/300/200/transport/6/'>
    </a>
  </div>
</div>