Diamond Gallery

by kthornbloom

HTML

<div class="todo">
<b>To-do:</b> <br>
    - Reduce the use of '<a href="http://css-tricks.com/magic-numbers-in-css/">magic numbers</a>' (css calc??)<br>
- Fix weird orphans<br>
- Light grey diamonds in blank spaces
</div>

<div class="diamond-gallery">
    <a href="#1" class="diamond">
            <img src="http://lorempixel.com/300/300/sports/">
            <div class="diamond-caption"><span>Title</span></div>
    </a>
    <a href="#2" class="diamond">
            <img src="http://lorempixel.com/300/300/">
            <div class="diamond-caption"><span>Title</span></div>
    </a>
    <a href="#3" class="diamond">
            <img src="http://lorempixel.com/300/300/people/">
            <div class="diamond-caption"><span>Title</span></div>
    </a>
    <a href="#4" class="diamond">
            <img src="http://lorempixel.com/300/300/city/">
            <div class="diamond-caption"><span>Title</span></div>
    </a>
    <a href="#5" class="diamond">
            <img src="http://lorempixel.com/300/300/sports/">
            <div class="diamond-caption"><span>Title</span></div>
    </a>
    <a href="#6" class="diamond">
            <img src="http://lorempixel.com/300/300/">
            <div class="diamond-caption"><span>Title</span></div>
    </a>
    <a href="#7" class="diamond">
            <img src="http://lorempixel.com/300/300/people/">
            <div class="diamond-caption"><span>Title</span></div>
    </a>
    <a href="#8" class="diamond">
            <img src="http://lorempixel.com/300/300/city/">
            <div class="diamond-caption"><span>Title</span></div>
    </a>
    <a href="#9" class="diamond">
            <img src="http://lorempixel.com/300/300/city/">
            <div class="diamond-caption"><span>Title</span></div>
    </a>
    <a href="#10" class="diamond">
            <img src="http://lorempixel.com/300/300/sports/">
            <div class="diamond-caption"><span>Title</span></div>
    </a>
    <a href="#11" class="diamond">
            <img...

CSS

html, body {
    padding:0;
    margin:0;
    font-family:helvetica, sans-serif;
}
.todo {
    padding:15px;
    margin:0 auto 15px auto;
    background:#eee;
    font-size:12px;
}
.parent {
    display:inline-block;
    margin: 0 0 87px 0;
}
.diamond-gallery {
    font-size:0;
    line-height:0;
    padding: 42px 0 100px 70px;
    overflow:hidden;
}
.diamond {
    width:200px;
    height:200px;
    margin: 0 -28px 0 -28px;
    display:inline-block;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position:relative;
    overflow:hidden;
    opacity:.3;
    -webkit-filter:grayscale(1);
    transition:all .2s ease-out;
}
.diamond:nth-child(2n) {
    position: relative;
    top: 144px;
}
.diamond:hover {
    opacity:1;
    -webkit-filter:grayscale(0);
}
.diamond-inner {
    position:relative;
    left:-50px;
    top:-50px;
    width:300px;
    height:300px;
    transform: rotate(-45deg);
}

.diamond-caption {
    position: absolute;
    background: rgba(0, 0, 0, 0.75);
    color: #FFF;
    font-size: 14px;
    line-height: 1em;
    width: 150px;
    height: 150px;
    top: 350px;
    left: 75px;
    text-align: center;
    transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transform: rotate(45deg);
}

.diamond-caption:active {
    transform: rotate(45deg) scale(.95);
}

.diamond-caption span {
    border: 2px solid #555;
    border-left: 0;
    border-right: 0;
    padding:4px;
    display:inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

JavaScript

// Apply inner wrap to rotate back to 0 degrees
$('.diamond').each(function () {
    $(this).wrapInner("<div class='diamond-inner'></div>");
});

// Group every two diamonds to prevent weird wrapping
var $children = $('.diamond');
for (var i = 0, l = $children.length; i < l; i += 2) {
    $children.slice(i, i + 2).wrapAll('<div class="parent"></div>');
}

// Hover FX
$('.diamond').hover(
  function() {
    $( this ).find('.diamond-caption').css('top','75px');
  }, function() {
        $( this ).find('.diamond-caption').css('top','350px');
  }
);