Imágenes

Con imágenes podemos crear efectos interesantes, vamos a centrarnos en efectos propios de una galería de imágenes. Lo primero será introducir una miniatura de la imagen en un <div>.

 

Os dejo las 2 imágenes que vamos a usar, por si no queréis buscar:

 

Imagen 1


Imagen 2

 

Creamos nuestro código HTML:

 

<div>
<a href="imagen1.jpg"><img src="imagen1.jpg" width="120px"></a>
Foto 1. Mar.
</div>
<div>
<a href="imagen2.jpg"><img src="imagen2.jpg" width="120px"></a>
Foto 2. Campo.
</div>

 

Nota: el enlace (href) depende de donde tengamos la imagen guardada, si la tenemos en la misma carpeta que nuestro archivo HTML, la dejamos tal como está en el ejemplo.

 

Son 2 imágenes, cada una metida en un <div>, redimensionamos la imagen para mostrar una miniatura. Y le ponemos un título a cada una. De momento esto se nos vería así:

 

 

notepad

 

 

Pero le daremos un diseño al contenedor <div> y a las imágenes (<img>) para hacerlo más bonito:

 

 

notepad

 

 

Nada nuevo aquí, pero repasemos el diseño; al elemento div le hemos dado un borde, unas medidas, un pequeño relleno, alineación del texto centrada, colocación a la izquierda del elemento anterior (float:left), un pequeño margen entre ellos y un color de fondo blanco.

 

Y al elemento img le hemos dado un pequeño margen para encuadrarlo bien dentro del div.

Ahora esto tiene un diseño más similar a una galería de imágenes.

 

 

notepad

 

 

Podemos darle un aspecto aún más vistoso si le añadimos un borde a la imagen cuando pasamos el cursor del ratón por encima:

 

 

notepad

 

 

Listo, nuestro resultado final sería algo así: (podéis probarlo, no es una captura de pantalla.)

 

 

Foto 1. Mar.

 

Foto 2. Campo.


 

Contenidos que te pueden interesar
Este sitio usa cookies para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Ninguna cookie será instalada a menos que se desplace exprésamente más de 400px. Leer nuestra Política de Privacidad y Política de Cookies. Las acepto | No quiero aprender cursos gratis. Sácame