Display Text on Photo When Hovered

Here is Some Text on Hover

If you want to show some text when you hover a single photo, you can use this. Just add a HTML/CSS box to your page and add the following code. You'll have to edit the URL, image etc.

HTML


<ul class="photo-wrap">	
	<li>
		<div class="photo-image">
			<a href="Your-Link-URL-Here">
				<img src="Your-Picture-Here" alt="Text Here" width="" height="" />
			</a>
		</div>
		<h2 class="photo-title">
			<a href="Your-URL-Here">Here is Some Text on Hover</a>
		</h2>
	</li>
</ul>

CSS


.photo-wrap {
	list-style: none;
	text-align: center;
	}
	
.photo-wrap li {
	display: inline-block;
	margin: 12px;
	position: relative;
	vertical-align: top;
	}
	
.photo-wrap li .photo-image a img {
	height: auto;
	max-width: 100%;
	}
	
.photo-wrap .photo-title {
	background: rgba( 0, 0, 0, .8 );
	font: normal 18px/27px Arial, Heletica, sans-serif;
	clear: none;
	float: none;				
	margin: 0;
	padding: 10px 18px;
	position: absolute;
		right: 0;
		left: 0;
		bottom: 20px;
	text-align: center;
	width: auto;
	opacity: 0;
	z-index: 1;
	}
	
.photo-wrap li:hover .photo-title {
	opacity: 1;
	}