¿Cómo hacer una simple galería responsive con CSS 2?

13-11-2014 - Andrés Cruz

En esta entrada veremos como hacer una simple galería responsive empleando un poco de CSS y nada más; esta entrada representa una variación del ejercicio anterior: ¿Cómo hacer una simple galería responsive con CSS 1?; la galería estará compuesta de imágenes y descripciones, pero el efecto empleado al momento de que el usuario coloque el cursor encima de las imágenes es diferente:

A continuación, la tabla de contenido:

Definiendo la estructura (HTML)

Definimos la estructura básica que tendrá la galería; en otras palabras, el HTML:

       <div id="container">
                <div>
                    <img src="img/arya-stark.jpg"/>
                    <span>Arya Stark</span>
                </div>
                .
                .
                .
                <div>
                    <img src="Imagen"/>
                   <span>Descpición</span>
                </div>
            </div>

Si leyó la entrada anterior podrá darse cuenta de que el código HTML es exactamente el mismo:

  • El div con identificador #container no es más que el contenedor en la cual va a estar alojada la galería en otras palabras, las imágenes y las breves descripciones.
  • Cada div hijo de #container contiene una imagen y su descripción; a su vez estos divs representan los componentes de la galería, debe haber uno por cada imagen que se desee registrar.

Definiendo el Estilo (CSS)

El CSS tiene variaciones respecto al utilizado en la galería del ejercicio anterior:

  • De igual manera, ocultamos la descripción adyacentes a las imágenes:
    #container div img + span{
    .
    .
    .
      opacity:0;
    }
            
    #container div img:hover + span{
      opacity:1;
    }
            
    Ocultando la descripción con la propiedad opacity para luego mostrarla progresivamente con las Transiciones de CSS.
  • Por defecto, se muestran tres imágenes por filas; pero, se se pueden adaptar fácilmente para mostrar más o menos imágenes por filas con la ayuda de los media query:
                @media (min-width:1600px){
                    #container div{
                        width: 15%;
                    }
                }
    }
            

Resultado final

Puedes visualizar y descargar el código completo de la galería en los siguientes enlaces:


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos a!

10$

En Udemy

Quedan 5 días!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!