Images Tile

by Serhioromano

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<div class="container">
    <div class="flavor-list row">
        <div class="flavor pull-left">
            <img src="http://lorempixel.com/300/200/abstract/1" class="img-rounded" />
            <div class="flavor-description" style="display:none">This is a description</div>
        </div>
        <div class="flavor pull-left">
            <img src="http://lorempixel.com/300/200/abstract/2" class="img-rounded" />
            <div class="flavor-description" style="display:none">This is a description</div>
        </div>
        <div class="flavor pull-left">
            <img src="http://lorempixel.com/300/200/abstract/3" class="img-rounded" />
            <div class="flavor-description" style="display:none">This is a description</div>
        </div>
        <div class="flavor pull-left">
            <img src="http://lorempixel.com/300/200/abstract/4" class="img-rounded" />
            <div class="flavor-description" style="display:none">This is a description</div>
        </div>
        <div class="flavor pull-left">
            <img src="http://lorempixel.com/300/200/abstract/5" class="img-rounded" />
            <div class="flavor-description" style="display:none">This is a description</div>
        </div>
    </div>
</div>

CSS

.flavor {
    position: relative;
    margin:5px;
}
.flavor-description {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.5;
    background-color: #000000;
    color: #ffffff;
    width: 100%;
    padding: 20px;
}

JavaScript

(function ($) {
    $('.flavor').on('click', function () {
        $('.flavor-description', $(this)).slideToggle();
    });
}(jQuery));