CSS-only animatie: afbeelding wisselen bij hover (logo-swap)

Ontdek hoe je de interactiviteit van je website vergroot met deze eenvoudige gids voor een logo- of afbeeldingswissel wanneer de muis erover beweegt. Bedoeld voor webdesigners en developers, met stapsgewijze uitleg en HTML- en CSS-snippets om dit dynamische visuele signaal naadloos in je project te zetten. Ideaal om logo’s of afbeeldingen extra flair te geven en de gebruikerservaring levendiger te maken.

DEMO: logo of afbeelding wisselen bij 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; }