Display Text on Photo When Hovered

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


<div class="content-wrapper">
	<figure>
		<a href="Your-Link-URL-Here">
			<img src="Your-Picture-Here" alt="Text Here" width="" height="" />
			<figcaption>Here is Some Text on Hover</figcaption>
		</a>
	</figure>
</div>

CSS


/**
* Change Text on Hover
************************************************/
.content-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

figure {
	position: relative;
	margin: 0 1rem 2rem;
	padding: 1rem;
	border: 1px solid #e3e3e3;
	background: #f7f7f7;
}

figcaption {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: .5rem;
	color: #fff;
	width: 100%;
	text-align: center;
	padding: 1rem 0;
	background: rgba( 0, 0, 0, .8 );
	opacity: 0;
	transition: all .4s ease-in-out;
}

figure:hover a figcaption {opacity: 1;}
/* Change Text on Hover End */