Mi intención es tener dos párrafos dentro de una caja , entre ellos uno oculto y cuando pase el mouse por arriba de la caja , el que está oculto aparezca, miren este ejemplo en esta porción de código.
HTLM
<body>
<div class="caja">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos, enim.<>
</p>
<p class="oculto">Esto debe de aparecer con el hover</p>
<p></p>
</div>
</body>
CSS
.caja {
background-color: blueviolet;
width: 400px;
height: 400px;
transition: all 1s ease;
}
.oculto{
display:none}
.caja:hover {
opacity: 0.5;
width: 500px;
}
Lo que yo quiero es que cuando se active el hover de la clase .caja, se muestre el párrafo oculto con clase .oculto , Nota, no quiero que se muestre haciendole hover al parrafo oculto, "que tampoco se si se podría" ,lo que quiero que se muestre al hacerle hover a la clase .caja
.caja:hover .oculto