Animação só com CSS: troca de imagem ao passar o rato (troca de logótipo)

Veja como aumentar a interatividade do seu site com este guia simples para aplicar um efeito de troca de logótipo ou de imagem ao passar o rato. Indicado para designers e programadores web, o tutorial inclui instruções passo a passo, com excertos de HTML e CSS, para integrar este sinal visual dinâmico no projeto. É uma forma fácil de dar um toque extra a logótipos ou imagens e de criar uma experiência mais envolvente.

DEMO: troca de logótipo ou imagem ao passar o rato

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