Omet navegació

Galeria de fotos

Galeria d'imatges

Explicació detallada en format text del bloc CSS que defineix la galeria d’imatges, amb estil modern, responsive-ready i efectes visuals subtils.

🖼️ Estils de la galeria d’imatges

1. Contenidor de la galeria (.gallery)

      .gallery { /* Contenidor de la galeria */
            display: grid;  /* Utilitza CSS Grid per al layout */
            grid-template-columns: repeat(3, 1fr);  /* Tres columnes de mida igual */
            gap: 15px; /* Espai entre les imatges */
            margin: 30px 0; /* Margen vertical */
        }

Utilitza CSS Grid per organitzar les imatges en 3 columnes iguals (1fr cadascuna).

  • gap: 15px crea espai entre les imatges, evitant que quedin enganxades.
  • margin: 30px 0 afegeix espai vertical abans i després de la galeria.

2. Cada element de la galeria (.gallery-item)

  .gallery-item { /* Estils per a cada element de la galeria */
            position: relative; /* Per a posicionar el text de la llegenda */
            overflow: hidden; /* Evita que la imatge sobresurti del contenidor */
            border-radius: 8px; /* Cantonades arrodonides */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombra suau */
            aspect-ratio: 4/3; /* Manté una proporció 4:3 */
        }

position: relative permet posicionar elements interns com el peu de foto (.gallery-caption).

  • overflow: hidden evita que el contingut surti del contenidor, especialment útil per a l’efecte hover.
  • border-radius: 8px dona cantonades arrodonides.
  • box-shadow afegeix una ombra suau per donar profunditat.
  • aspect-ratio: 4/3 manté una proporció fixa per a cada imatge, independentment del contingut.

3. Imatge dins de cada item (.gallery-item img)

.gallery-item img { /* Estils per a les imatges de la galeria */
            width: 100%; /* Amplada completa del contenidor */
            height: 100%; /* Alçada completa del contenidor */
            object-fit: cover; /* Manté la proporció de la imatge */
            transition: transform 0.3s; /* Transició suau per a l'efecte hover */

La imatge ocupa tot l’espai disponible del contenidor.

  • object-fit: cover assegura que la imatge mantingui la proporció i ompli el contenidor sense deformar-se.
  • transition prepara l’efecte de transformació per quan l’usuari passa el cursor.

4. Efecte hover sobre la imatge

 .gallery-item:hover img { /* Efecte hover per a les imatges */
            transform: scale(1.05); /* Escala la imatge lleugerament */
        }

Quan l’usuari passa el cursor per sobre, la imatge s’amplia lleugerament (zoom suau).

  • Dona una sensació de dinamisme i interacció sense ser invasiu.

5. Peu de foto (.gallery-caption)

 .gallery-caption { /* Estils per al text de la llegenda */
            position: absolute; /* Posicionament absolut dins del contenidor */
            bottom: 0; /* A la part inferior */
            left: 0; /* A l'esquerra */
            right: 0; /* A la dreta */
            background: rgba(44, 62, 80, 0.85); /* Fons semitransparent */
            color: white; /* Text blanc */
            padding: 10px; /* Espaiat intern */
            text-align: center; /* Centra el text */
            font-size: 0.9rem; /* Mida de font */
        }

Es posiciona a la part inferior de la imatge amb absolute.

  • El fons amb rgba crea una capa semitransparent que permet veure la imatge per sota.
  • El text és blanc, centrat i amb una mida moderada.
  • El padding dona espai intern per fer-lo més llegible.

Aquest estil de galeria és molt versàtil i fàcil d’adaptar amb @media queries per mostrar 2 o 1 columna en pantalles més petites.

Creat amb eXeLearning (Finestra nova)