Animation CSS uniquement : échange d’image au survol (échange de logo)

Découvrez comment renforcer l’interactivité de votre site avec ce guide simple pour créer un effet d’échange de logo ou d’image au survol de la souris. Conçu pour les designers et développeurs web, ce tutoriel propose des instructions pas à pas, avec des extraits HTML et CSS, pour intégrer ce repère visuel dynamique à votre projet. C’est une façon simple d’ajouter du cachet aux logos ou aux images et de rendre l’expérience plus engageante.

DEMO : échange de logo ou d’image au survol

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