Cómo superponer artículo en CSS de imagen

Este artículo le muestra de qué forma utilizar HTML y CSS para poner artículo en una imagen.
La imagen debe ser suficientemente obscura y el texto ha de ser blanco para hacer más simple la lectura y cumplir con los estándares de disponibilidad.
Sin embargo, si la imagen no es lo suficientemente obscura, tenemos la posibilidad de añadir un degradado oscuro a la imagen. Esto causa que el texto sea mucho más entendible y tenga un mejor contraste.
Existen muchas resoluciones y técnicas eficaces que usan CSS.

1: Ejemplo de artículo en imágenes-WordPress

Esta es una solución fácil y maleable para superponer títulos de artículo en imágenes en weblogs de WordPress.
En este caso de ejemplo, nos encontramos empleando etiquetas HTML usadas por WordPress para mostrar una imagen con un título.
Creamos una capa con elementos ficticios :Atrás Y establece un fondo con un degradado lineal. Valor RGB.

original

Gradiente lineal

HTML

CSS

.wp-caption 
position: relative;
padding: 0;
margin: 0;

.wp-caption img 
display: block;
max-width: 100%;
height: coche;

.wp-caption:after 
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 100%) repeat 0 0;
z-index: 1;

.wp-caption-text 
display: block;
position: absolute;
width: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;

2: el artículo en la imagen al pasar el mouse

A veces, solo desea enseñar texto en el momento en que se desplaza sobre la imagen o en el momento en que la imagen está pensada.
En el próximo ejemplo, mostramos el artículo del título con un fondo obscuro y una transición de transparencia CSS en el puntero del mouse.

Demostración: https://www.designlabthemes.com/css-demo/css-text-hover/

HTML

CSS

.wp-caption 
position: relative;
padding: 0;
margin: 0;

.wp-caption img 
display: block;
max-width: 100%;
height: auto;

.wp-caption-text 
opacity: 0;
position: absolute;
width: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 0.75em 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0,0,0,.7);
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;

.wp-caption:hover .wp-caption-text 
opacity: 1;