Rule of Thirds Overlay

The rule of thirds refers to a 3 by 3 grid that fits on top of any image. The grid works horizontally or vertically and helps you determine how the eye follows an image.

HTML

<div class="cat">
    <img src="http://lorempixel.com/400/200/sports" />
    <div class="desc">
        <p>Beschreibung Kategorie Sport</p>
    </div>
</div>

<div class="cat">
    <img src="http://lorempixel.com/400/200/people" />
    <div class="desc">
        <p>Beschreibung Kategorie Leute</p>
    </div>
</div>

<div class="cat">
    <img src="http://lorempixel.com/400/200/nature" />
    <div class="desc">
        <p>Beschreibung Kategorie Natur</p>
    </div>
</div>

CSS

.cat {
    position: relative;
    display: inline-block;
}

.desc {
    display: none;        
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.desc p {
    position: absolute;
    font-size: 12pt;
    text-align: center;
    width: 120px;
    top: 50%;
    left: 50%;
    color: #fff;
}

JavaScript

set2center = function(element) {
    var t = (element.height() / 2) * -1;
    var l = (element.width() / 2) * -1;
    element.css({'margin-top': t+'px', 'margin-left': l+'px'});
};


$('.cat').hover(
function() {    
    $(this).find('.desc').fadeIn();
    set2center($(this).find('.desc p'));
}, function() {
    $(this).find('.desc').fadeOut();
});