En este artículo, te guiaré a través del proceso para crear una galería de imágenes con títulos utilizando HTML y CSS.
Sigue estos sencillos pasos y podrás crear fácilmente una galería de imágenes impresionante con títulos en tu página web.
Paso 1: Preparación del Código HTML
Comencemos creando el esqueleto básico de nuestra página web. Aquí está el código HTML inicial:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galería de Imágenes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<!-- Aquí se agregarán las imágenes -->
</div>
</body>
</html>
<div class="gallery">
<div class="image">
<img src="image1.jpg" alt="Imagen 1" title="Título 1">
</div>
<div class="image">
<img src="image2.jpg" alt="Imagen 2" title="Título 2">
</div>
<div class="image">
<img src="image3.jpg" alt="Imagen 3" title="Título 3">
</div>
<!-- Agrega más imágenes según sea necesario -->
</div>
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.image {
position: relative;
margin: 10px;
}
.image img {
width: 300px; /* Ajusta el ancho de la imagen según sea necesario */
height: auto;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.image:hover::after {
content: attr(title);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 5px 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
white-space: nowrap;
}
Paso 4: Resultado Final
¡Y eso es todo! Ahora tienes una galería de imágenes en tu página web, ¡completa con títulos que aparecen cuando pasas el cursor sobre ellas!
¡Ahí lo tienes! Sigue estos sencillos pasos y podrás crear fácilmente una galería de imágenes impresionante con títulos en tu página web. ¡Espero que este artículo te haya sido útil! Si tienes alguna pregunta, ¡no dudes en dejar un comentario abajo!
0 Comentarios