Opacity
Mediante esta propiedad, podemos dar una transparencia total o parcial sobre el elemento indicado y todos los elementos hijos que tiene. La propiedad opacity se puede dar o bien en procentaje (0% completamente transparente, 100% completamente visible) o bien un número del 0 al 1, donde 0 es completamente transparente y 1 completamente visible.
<div class="container">
<p>Ejemplo</p>
</div>La opacidad se aplica a todo el elemento en conjunto, incluyendo su fondo, borde y todo su contenido (texto, imágenes, etc.).
Si lo que queremos es usar un fondo transparente por ejemplo, no es esta propiedad la que buscas, sino RGBA o HSLA donde el canal alpha es el encargado de controlar la transparencia definida en ese color.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Opacity con Hover</title>
<link rel="stylesheet" href="3.opacity.css">
</head>
<body>
<div class="imagen-container">
<img src="https://picsum.photos/id/1018/300/200" alt="Paisaje con árbol y montañas">
<div class="texto-superpuesto">¡Ver más!</div>
</div>
</body>
</html>