Animación solo con CSS: cambio de imagen al pasar el ratón (cambio de logo)

Descubre cómo dar más interactividad a tu sitio con esta guía sencilla para cambiar un logo o una imagen al pasar el ratón. Pensada para diseñadores y desarrolladores web, incluye instrucciones paso a paso y fragmentos de HTML y CSS para integrar esta señal visual dinámica en tu proyecto. Es una forma fácil de aportar un extra de estilo a logotipos o imágenes y de crear una experiencia más atractiva.

DEMO: cambio de logo o imagen al pasar el ratón

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