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

Loader Battlenet

Loader Battlenet

Flat Module con puro CSS

Flat Module con puro CSS

Efectos hover con CSS

Efectos hover con CSS

Algunos artículos que te pueden interesar

Efectos con hover y transition en CSS (parte 1)

Efectos con hover y transition en CSS (parte 1)

En esta entrada veremos algunos experimentos con transiciones en CSS empleando además selectores (hover, after y before).

Andrés Cruz 25-06-2015

¿Cómo anclar el Footer a la parte inferior de la pantalla con solo CSS?

¿Cómo anclar el Footer a la parte inferior de la pantalla con solo CSS?

En esta nueva entrega, veremos ¿Cómo anclar el Footer a la parte inferior de la pantalla con solo CSS?

Andrés Cruz 14-08-2014

Creando una web básica con Flex en HTML

Creando una web básica con Flex en HTML

En esta entrada veremos cómo crear una web básica empleando flex con las propiedades flex-grow, flex-shrink y flex-basis.

Andrés Cruz 07-04-2016