espero estés bien!
voy agregar las 2 opcione, una onclick con solo css y la otra :hover espero te sirvan!
index.html
<!-- onclick -->
<div id="onclick">
<input id="mostrar" type="checkbox" name="mostrar"/>
<label for="mostrar">mostrar</label>
<img src="https://images.unsplash.com/photo-1642019275442-d9622e4a27ab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NDY3MTYwMw&ixlib=rb-1.2.1&q=80&w=400" alt=""/>
<p>Lorem ipsum dolor sit.</p>
</div>
<!-- hover -->
<div id="hover">
<img src="https://images.unsplash.com/photo-1642019275442-d9622e4a27ab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NDY3MTYwMw&ixlib=rb-1.2.1&q=80&w=400" alt=""/>
<p>Lorem ipsum dolor sit.</p>
</div>
¡Es hora del CSS!
Lo primero que debemos hacer es darle un tamaño al <div id="onclick">
y al <div id="hover"
(digamos 200px) y también un position relative
(esto es importante) para que el contenido no se desborde al usar un position:absolute;
en lo elementos anidados. Tambien agrego un float irrelevante y un margin, solo para que se vea lindo jajaja
#onclick, #hover { width: 200px; position: relative; float: left; margin: 0 1em; }
El input #onclick lo seteamos con #onclick input{display: none;}
Nuestro va a ser la jugada secreta, le agrego a este un cursor: pointer;
esto servirá para que al momento de pasar el mouse sobre la imagen de a entender que tiene una acción.
#onclick label {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}
Al tag #onclick img, #hover img le agregamos un width del 100% del div contenedor: #onclick img, #hover img { width: 100%; }
agregamos la opacidad al texto: #onclick p, #hover p {opacity: 0;
por último agregamos el evento onclick para mostrar el texto:
#mostrar:checked ~ p { opacity: 1; }
Para que el evento hover se lance le agregamos a el div contenedor
#hover:hover p { opacity: 1; }
la virgulilla ~
funciona como un buscador del tag, clase, id, type; cuando lo encuentra lanza el evento.
style.css
*,
*:after,
*:before {
box-sizing: border-box;
}
#onclick,
#hover {
width: 200px;
position: relative;
float: left;
margin: 0 1em;
}
#onclick input {
display: none;
}
#onclick label {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}
#onclick img,
#hover img {
width: 100%;
}
#onclick p,
#hover p {
opacity: 0;
}
#onclick #mostrar:checked ~ p {
opacity: 1;
}
#hover:hover p{
opacity: 1;
}
Saludos!