gallery overlay description

Hello,

You can consider using the following code:

<div class="masonry-thumbs grid-2" data-big="3" data-lightbox="gallery">
	<a href="images/portfolio/full/1.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/portfolio/2/1.jpg" alt="Gallery Thumb 1">
		<div class="overlay on-hover">
			<div class="text-overlay">
				<span class="badge badge-danger">World</span>
				<div class="text-overlay-meta">
					<span>14th Sep 2014</span>
				</div>
			</div>
		</div>
	</a>
	<a href="images/portfolio/full/2.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/portfolio/2/2.jpg" alt="Gallery Thumb 2"></a>
	<a href="images/portfolio/full/3.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/portfolio/2/3.jpg" alt="Gallery Thumb 3"></a>
	<a href="images/portfolio/full/4.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/portfolio/2/4.jpg" alt="Gallery Thumb 4"></a>
	<a href="images/portfolio/full/5.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/portfolio/2/5.jpg" alt="Gallery Thumb 5"></a>
</div>

and then use the following CSS Code:

.on-hover { opacity: 0; }

body:not(.device-touch) .on-hover {
	-webkit-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
}

.on-hover:hover { opacity: 1; }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.