CSS-Swag

With this little snippet, you can easily add a title and description to any image with a fancy little jQuery slide effect. Enjoy!

Demo: jsFiddle | Codepen.io

				<a href="#" class="image-details">
    <img src="http://placehold.it/200x200" alt="" />
    <span class="rollover">
        <h4>Image Title</h4>
        <p>Here is a short description of the image</p>
    </span>
</a>
			

				.image-details
{
    position: relative;
    text-decoration: none;
}
.image-details img
{
    opacity: .5;
    -webkit-transition: opacity .5s ease;
}
.image-details:hover img{opacity: 1;}
.image-details .rollover
{
    display: block;
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 3px;
    color: #FFF;
    font-family: Helvetica, Arial, sans-serif;
    font-size: .9em;
    background-color: #000;
    text-shadow: 0px 0px 2px #000;
    opacity: .5;
}
.image-details .rollover h4
{
    font-weight: 600;
    padding: 0px 5px;
    margin-top: 8px;
    margin-bottom: 0px;
}
.image-details .rollover p
{
    padding: 0px 5px;
    margin-top: 0px;
    margin-bottom: 5px;
}
			

				$(document).ready(function() {
    $('.rollover').css('display', 'none');
    $('.image-details').hover(function() {
        $(this).children('.rollover').slideDown(250);
    }, function() {
        $(this).children('.rollover').slideUp(250);
    });
});​