Las galerías de imágenes son una herramienta poderosa para mejorar la estética de tu sitio web y mostrar contenido visual de manera atractiva. En este artículo, exploraremos cómo crear una galería de imágenes utilizando código HTML y CSS, sin necesidad de conocimientos avanzados de programación.
Importancia de las Galerías de Imágenes
Las imágenes tienen un impacto significativo en la experiencia del usuario en un sitio web. Una galería de imágenes bien diseñada puede ayudar a:
Destacar tu Contenido: Si eres un fotógrafo, diseñador, artista o simplemente deseas resaltar productos o proyectos, una galería de imágenes te permite mostrar tu trabajo de manera efectiva.
Aumentar el Compromiso: Las imágenes atractivas capturan la atención de los visitantes y los alientan a explorar tu sitio web en busca de más detalles.
Mejorar la Estética: Una galería bien diseñada agrega un toque de elegancia y profesionalismo a tu sitio web.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Galeria HTML y CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contenedor-galeria">
<div class="galeria">
<div class="contenedor-imagen">
<figure>
<img src="*URL de tu imagen aquí*">
</figure>
</div>
<div class="contenedor-imagen">
<figure>
<img src="*URL de tu imagen aquí*">
</figure>
</div>
<div class="contenedor-imagen">
<figure>
<img src="*URL de tu imagen aquí*">
</figure>
</div>
<div class="contenedor-imagen">
<figure>
<img src="*URL de tu imagen aquí*">
</figure>
</div>
</div>
</div>
</body>
</html>CSS
body {
background-color: #311650;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.contenedor-galeria {
display: grid;
place-items: center;
width: 150px;
}
.galeria {
display: flex;
flex-wrap: wrap;
gap: 5px;
max-width: 400px;
}
.contenedor-imagen {
position: relative;
left: 0;
width: 80px;
border-radius: 5px;
height: 150px;
overflow: hidden;
background-color: #efefef;
transition: 0.4s ease-in-out;
box-shadow: 0 5px 12px rgb(0, 0, 0, 0.5);
flex: 0.25;
}
.contenedor-imagen img {
height: 150px;
width: 100px;
object-fit: cover;
}
.contenedor-imagen:hover {
flex: 2;
cursor: pointer;
border-radius: 8px;
}Este código HTML y CSS proporciona una estructura básica y estilo a tu galería de imágenes. Puedes personalizarla agregando tus propias imágenes y ajustando los estilos según tus preferencias.
Pruébalo aquí: (Link)
Conclusión
Una galería de imágenes es una herramienta valiosa para mejorar la estética de tu sitio web y atraer a tus visitantes. Con código HTML y CSS básico, puedes crear una galería de imágenes elegante y personalizable que muestre tu contenido visual de manera efectiva. ¡Aprovecha esta herramienta para destacar tu trabajo, productos o proyectos en línea y brindar una experiencia visual excepcional a tus usuarios!
