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:
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.
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!
