Animazione solo CSS: scambio di immagine al passaggio del mouse (swap del logo)

Scopri come aumentare l’interattività del tuo sito con questa guida semplice per applicare uno scambio di logo o di immagine al passaggio del mouse. Pensata per designer e sviluppatori web, include istruzioni passo passo e frammenti HTML e CSS per integrare questo segnale visivo dinamico nel progetto. È un modo facile per dare un tocco in più a loghi o immagini e rendere l’esperienza più coinvolgente.

DEMO: scambio di logo o immagine al passaggio del mouse

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; }