Link Attribute Image Overlay

Add the links title attribute to the image that it wraps

by Jon Fuller

HTML

<div>
	<a href="https://freshysites.com" target="_blank" title="FreshySites">
		<img src="https://freshysites.com/wp-content/uploads/2016/10/garysupullit_portfolio.jpg">
	</a>
</div>

CSS

div { width: 300px; }
img { display: block; width: 100%; }
a { display: block; position: relative; }

a::before {
	content:'';
	background-color: rgba(255,255,0,0.5);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: all 0.5s ease;
}

a::after {
	content: attr(title);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-family: sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

a:hover::before {
	background-color: rgba(255,0,0,0.3);	
}