CSS-only Animation: Bildwechsel beim Hover (Logo-Swap)

So verstärkst du die Interaktivität deiner Website: Diese einfache Anleitung zeigt dir, wie du beim Darüberfahren mit der Maus ein Logo oder Bild austauschst. Sie richtet sich an Webdesigner und Entwickler und enthält Schritt-für-Schritt-Hinweise sowie HTML- und CSS-Schnipsel, damit du diesen dynamischen visuellen Impuls nahtlos in dein Projekt einbauen kannst. Ideal, um Logos oder Bildern extra Wirkung zu geben und die Nutzererfahrung lebendiger zu machen.

DEMO: Logo- oder Bildwechsel beim Hover

HTML

<div class="swap">
	<a href="https://wedesignorange.com">
		<img class="main" src="YOUR-MAIN-IMAGE" />
		<img class="hover" src="YOUR-SWAPPING-IMAGE" />
	</a>
</div>

CSS

.swap { height: 200px; width: 200px; position: relative; }
.swap img {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: opacity .9s;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.swap img.hover, .swap:hover img.main { opacity:0; }
.swap img.hover:hover { opacity:1; }