1. Marcado HTML :
- Agregar un elemento de imagen (`
2. Estilo CSS :
- Diseñe la imagen con las dimensiones adecuadas y los efectos deseados.
- Diseñe el texto del título usando el selector `figcaption`.
3. Posicionamiento de subtítulos :
- Utilice la propiedad `position` para colocar el título en relación con la imagen. Las opciones comunes incluyen "absoluta", "relativa" y "estática".
- Ajuste las propiedades "arriba", "derecha", "abajo" e "izquierda" para controlar la posición del título.
4. Apariencia de los subtítulos :
- Utilice las propiedades "color de fondo", "color", "relleno" y "margen" para controlar el fondo, el color del texto, el espaciado y la sangría del título.
5. Alineación de texto :
- Utilice la propiedad `text-align` para centrar, alinear a la izquierda o a la derecha el texto del título.
6. Efectos de desplazamiento (opcional) :
- Agregue efectos de desplazamiento a la imagen o título usando la pseudoclase `:hover` para mejorar la interacción del usuario.
7. Consultas de medios (opcional) :
- Utilice consultas de medios para ajustar el estilo de los subtítulos para diferentes tamaños de pantalla.
Aquí hay un fragmento de código CSS de ejemplo:
```css
.contenedor de imagen {
posición:relativa;
ancho:300px;
}
.image-contenedor img {
ancho:100%;
}
.image-container figcaption {
posición:absoluta;
abajo:0;
izquierda:0;
ancho:100%;
color de fondo:rgba(0, 0, 0, 0.5);
color:#fff;
relleno:10px;
alineación de texto:centro;
}
@media (ancho máximo:600 px) {
.image-container figcaption {
tamaño de fuente:0,8rem;
}
}
```
En este ejemplo, el título se coloca absolutamente en la parte inferior izquierda del contenedor de la imagen, con un fondo negro semitransparente y texto blanco. Los estilos también se ajustan para pantallas más pequeñas mediante una consulta de medios.
Experimente con diferentes opciones de estilo para crear efectos de pies de imagen únicos y visualmente atractivos.
`) y un elemento de título (`