Mejora la experiencia visual de tu sitio web con una galería en acordeón horizontal personalizada. Aprende a implementar esta característica impresionante utilizando HTML y CSS.
RESULTADO
HTML
<div class="galeria">
<img decoding="async" src="https://www.imgonline.com.ua/examples/two-tone-blurred-background-1-big.jpg">
<img decoding="async" src="https://www.imgonline.com.ua/examples/two-tone-blurred-background-2-big.jpg">
<img decoding="async" src="https://www.imgonline.com.ua/examples/two-tone-blurred-background-3-big.jpg">
<img decoding="async" src="https://www.imgonline.com.ua/examples/rainbow-background-3-big.jpg">
</div>
CSS
.galeria{
display: flex;
width:500px;
height: 300px;
}
.galeria img{
width: 0px;
flex-grow: 1;
object-fit: cover;
filter: brightness(80%);
transition: .7s ease;
}
.galeria img:hover{
width: 500px;
opacity: 1;
filter: brightness(130%)
}