<div class="thumbnail">
	<img src="http://tsukulog.net/wp-content/uploads/2015/04/6-min.jpg">
	<div class="caption"><span>Blue Pond</span></div>
</div>
.thumbnail {
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	height: 400px;
	width: 600px;
}

.caption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: rgba(255, 155, 0, 0.2);
	box-shadow: inset 0 0 50px rgba(50, 30, 0, .6), inset 0 0 100px rgba(50, 30, 0, .3);
}

.caption span {
	position: absolute;
	left: -500px;
	bottom: 0;
	display: block;
	padding: 20px;
	text-align: left;
	font-family: 'Raleway', sans-serif;
	font-size: 28px;
	background-color: rgba(0, 0, 0, .5);
	color: #FFF;
	width: 100%;
}
$(function() {
	var $image = $('.thumbnail');
	var $caption = $('.caption span');
	var $shadow = $('.caption');

	$image.mouseover(function() {
		$shadow.stop().animate({
			opacity: 1

		}, {
			duration: 600,
			queue: false
		})
		$caption.stop().animate({
			left: 0,
			opacity: 1

		}, {
			duration: 600,
			queue: false
		});

	})
	$image.mouseout(function() {
		$shadow.stop().animate({
			opacity: 0

		}, {
			duration: 600,
			queue: false
		})
		$caption.stop().animate({
			left: '-500px',
			opacity: 0

		}, {
			duration: 600,
			queue: false
		});

	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js