DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
13-11-2014

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:

Definiendo el Estilo (CSS)

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

Resultado final

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


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Corazón con CSS

Corazón con CSS

Botón flotante

Botón flotante

Hover over the cards

Hover over the cards

Algunos artículos que te pueden interesar

Como mostrar contenido en columnas expandibles con solo CSS

Como mostrar contenido en columnas expandibles con solo CSS

En este artículo veremos una forma de mostrar contenido a través de columnas expansibles.

Andrés Cruz 21-07-2014

Truco CSS: Construir flechas en los contenedores HTML

Truco CSS: Construir flechas en los contenedores HTML

En esta entrada explicaremos como crear contenedores con flechas o contenedores con una una bifurcación que le colocamos en el mismo.

Andrés Cruz 04-06-2015

La pseudo-class :target en CSS

La pseudo-class :target en CSS

Este selector o pseudo-class es empleado para seleccionar o dar estilo a un único elemento cuyo id coincida en alguno de los elementos HTML.

Andrés Cruz 23-02-2015