Place label Display="block" when passing over the image and removing Display="None"

Question

I want to do an effect with Javascript, when hovering the mouse over the image you need the caption to appear and when removing the mouse I want it to be hidden. However, I cannot achieve the desired result. I already put the events inside the div, but what is hidden when I remove the mouse is the image and not the legend.

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>

Answer 1

You don’t need to do javascript, you can use the title attribute in the image:

<img src="sublime2.png"  title="Sublime Net, projeto de Tecnologia de negócios na internet. joaovitorleffa.github.io"/>

And you can use the title in other things too: <div>, <input>, <a>...