Hovereffekt bei Bildern mit Fontawesome und CSS3

Hovereffekte bei Bildern gibt es viele mit Javascript. Dies kann aber auch völlig ohne Javascript mit purem CSS3 ermöglicht werden. Ziel ist es, bei Mouseover über einem Bild ein Icon weich einzublenden, welches sich automatisch in der Bildmitte zentriert.

Voraussetzung ist ein Div-Container mit einer festen maximalen Breite. Wird die Breite des Containers relativ in Prozent angegeben, passt sich das Bild und die Zentrierung des Icons auf dem Bild der Größe an. Die nachfolgenden Einstellungen sind daher auch responsiv einsetzbar.

CSS:

img {
	height: auto;
	max-width: 100%;
}

#artikel {
	width: 100%;
	max-width: 580px;
}

.imgcaption.photoicon:after {
	content: "\f030";
}

.imgcaption:after {
	box-sizing: border-box;
	color: #ffffff;
	content: "\f030";
	font-family: 'fontawesome';
	font-size: 30px;
	height: 30px;
	left: 50%;
	margin-left: -15px;
	margin-top: -15px;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
	top: 50%;
	transition: all 0.5s ease 0s;
	width: 30px;
}

.imgcaption {
	position: relative;
}

.imgcaption:hover:after {
	opacity: 1;
}

Über die Pseudoklasse .imgcaption:after wird ein versteckter Div-Container mittig auf das Bild gelegt, welches über die Angabe .imgcaption:hover:after sichtbar gemacht wird. Die Abstände und Größen für margin und width ergeben sich anhand der Größenangabe für die font-size.

HTML:

<div id="artikel">	
	<div class="imgcaption photoicon">
		<img alt="Foto" src="placeholder.jpg" />
	</div>
</div>

Als Ergebnis erscheint ein weißes Fotokameraicon mittig über dem Bild.