МОДКС Галлерея

HTML

<div class="galleryWrap">

    <div class="galleryItem">
        <a class="galleryItemImg zoombox zgallery000" href="http://lorempixel.com/output/cats-q-c-800-800-5.jpg" title="заголовок картинки">
            <img src="http://lorempixel.com/output/cats-q-c-200-200-4.jpg" alt="Сео заголовок"/>
        </a>
            
        <a class="galleryItemTitle" href="">заголовок картинки</a>
        
    </div>
    
    <div class="galleryItem">
        <a class="galleryItemImg zoombox zgallery000" href="http://lorempixel.com/output/cats-q-c-800-800-5.jpg" title="заголовок картинки">
            <img src="http://lorempixel.com/output/cats-q-c-200-200-4.jpg" alt="Сео заголовок"/>
        </a>
            
        <a class="galleryItemTitle" href="">заголовок картинки</a>
        </div>
    
    <div class="galleryItem">
        <a class="galleryItemImg zoombox zgallery000" href="http://lorempixel.com/output/cats-q-c-800-800-5.jpg" title="заголовок картинки">
            <img src="http://lorempixel.com/output/cats-q-c-200-200-4.jpg" alt="Сео заголовок"/>
        </a>
            
        <a class="galleryItemTitle" href="">заголовок картинки</a>
        
    </div>
    
    <div class="galleryItem">
        <a class="galleryItemImg zoombox zgallery000" href="http://lorempixel.com/output/cats-q-c-800-800-5.jpg" title="заголовок картинки">
            <img src="http://lorempixel.com/output/cats-q-c-200-200-4.jpg" alt="Сео заголовок"/>
        </a>
            
        <a class="galleryItemTitle" href="">заголовок картинки</a>
        
    </div>
    
    <div class="galleryItem">
        <a class="galleryItemImg zoombox zgallery000" href="http://lorempixel.com/output/cats-q-c-800-800-5.jpg" title="заголовок картинки">
            <img src="http://lorempixel.com/output/cats-q-c-200-200-4.jpg" alt="Сео заголовок"/>
        </a>
            
        <a class="galleryItemTitle" href="">заголовок картинки</a>
        
    </div>
    
</div>

CSS

.galleryWrap {
    overflow: hidden;
}
.galleryItem {
	overflow: hidden;
	position: relative;
	display: inline-block;
	width: 25%;
	text-align: center;
	margin: 0 15px 20px 0;
}
.galleryItemImg {
    margin: 10px 0;
}
.galleryItemImg img {
    width: 100%;
}
.galleryItemTitle {
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	bottom: -100px;
	display: block;
	top: 400px;
	left: 0;
	right: 0;
	padding: 10px;
	position: absolute;
	text-align: center;
	text-decoration: none;

	-webkit-transition:	all .5s 0s ease;
	-moz-transition:	all .5s 0s ease;
	-o-transition:		all .5s 0s ease;
	-ms-transition:		all .5s 0s ease;
	transition:			all .5s 0s ease;
}
.galleryItem:hover .galleryItemTitle {
	top: 50%;
	bottom: 0px;
}
.galleryItemDnld {
    position: relative;
    background-color: #333;
    color: #fff;
    display: block;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    white-space: pre;
}