En esta entrada veremos como hacer una simple galería responsive empleando un poco de CSS y nada más; la galería está compuesta de imágenes y una breve descripción sobre las mismas:
A continuación, la tabla de contenido:
Definiendo la estructura (HTML)
Primero 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>
Explicando el código HTML anterior:
- 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 estediv
representan los componentes de la galería, debe haber uno por cada imagen que se desee registrar.
Definiendo el Estilo (CSS)
Ahora es el turno de la presentación para la galería, en otras palabras el CSS, veamos algunos aspectos claves:
- Empleamos el selector hermano provisto en CSS para seleccionar los
span
al mismo nivel y adyacentes a las imágenes:#container div img + span{ . . . opacity:0; }
Indicando que la descripción permanecerá oculta (opacity:0
) hasta que se posicione el cursor encima de la imagen (:hover
) y se muestre la descripción (span
):#container div img:hover + span{ opacity:1; }
Se emplea la propiedadopacity
para ocultar y mostrar la descripción de la imagen en vez de otras propiedades comodisplay
ovisibility
porque con la propiedadopacity
se logra un efecto progresivamente para mostrar las descripciones y para enderezar las imágenes. Como podrás darte cuenta, todos los efectos emplean las llamadas Transiciones en 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 Andrés Cruz](/public/images/perfil.jpg)
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter