Quero fazer um efeito com o JavaScript, ao passar o mouse em cima da imagem é preciso que apareça a legenda e ao retirar o mouse quero que a mesma fique oculta. No entanto, não consigo chegar ao resultado desejado. Já coloquei os eventos dentro da div, porém o que fica oculto quando retiro o mouse é a imagem e não a legenda.
function descricao(){
document.getElementById("sublime").style.display='block';
}
function retira(){
document.getElementById("sublime").style.display='none';
}
#sublime{
opacity: 1;
width: 100%;
height: 382px;
background-image: url(imagens/sublime.png);
box-shadow: 1px 1px 4px black;
}
#sublime:hover{
opacity: 0.5;
transition: 1s;
}
#sublime p {
font-size: 100px;
color: black;
}
@media(max-width: 800px){
.corpo2{
width: 90%;
margin: 0 auto;
}
.corpo2 h3{
margin-left: 13%;
}
#sublime{
width: 330px;
height: 191px;
background-image: url(imagens/sublime2.png);
}
}
<div id="sublime">
<p style="display: none" onmouseover="descricao()" onmouseout="retira()">Sublime Net, projeto de Tecnologia de negócios na internet. joaovitorleffa.github.io</p>
</div>