Galería de imágenes con HTML y CSS

Encontré en tiktok una divertida galería de imágenes con HTML y CSS que podemos usar en nuestros propios proyectos.

Os mostraré en primer lugar el código HTML necesario:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galería de imagenes</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="galeria">
        <div style="background-image: url(/img/img1.jpg);"></div>
        <div style="background-image: url(/img/img2.jpg);"></div>
        <div style="background-image: url(/img/img3.jpg);"></div>
        <div style="background-image: url(/img/img4.jpg);"></div>
    </div>

</body>
</html>

En los estilos usaremos flexbox para crear esta animación tan sencilla. Veámos el código:

.galeria {
    display: flex;
    height: 20rem;
    gap: 1rem;
    width: 60%;
    margin: 50px auto;
}

.galeria > div {
    flex: 1;
    border-radius: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    transition: all .8s cubic-bezier(.25, .4, .45, 1.4);
}

.galeria > div:hover {
    flex: 2;
}

Los único que nos queda es mostrar el resultado en un pequeño vídeo.

Puedes encontrar más tutoriales creados con HTML y CSS3 que te puedan ayudar con tus proyectos web a través de mi blog.

Deja una respuesta Cancelar la respuesta