Blog Infolayma

Como Crear esta Galería de Imágenes con HTML y Css

/*Galeria de imagenes */

<section >

<img> src= "https://m.media-amazon.com/images/I/51Vz9XgzgoL._AC_SL1000_.jpg" />
<img> src= "https://m.media-amazon.com/images/I/71urA+Ql6zL._AC_SL1500_.jpg" />
<img> src= "https://m.media-amazon.com/images/I/61PurfdN-4L._AC_SL1500_.jpg" />
<img> src= "https://m.media-amazon.com/images/I/51VxXobs9yL._AC_SL1200_.jpg" />
<img> src= "https://m.media-amazon.com/images/I/71ELYvFYB4L._AC_SL1500_.jpg" />

</section >

Código HTML

/*Galeria de imagenes */

<style >

section {
    display: flex;
    width: 800px;
    height: 430px;
}

section img {
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}

section img:hover {
    cursor: crosshair;
    width: 180px;
    opacity: 1;
    filter: contrast(120%);
}

</style >

Código CSS