pictures show description when you hover your mouse in a separate div

Question

I want to put an image next to each other and when you hover the mouse on top appears a description in a separate column of the site, in case there is no way it can be the same as long as to place an image next to each other and the descriptions do not disfigure the images next to the :Hover

if it doesn’t give in html can help me in javascript... CSS q to using:

.descricao, descricaodois{
    display: none;
}
.item:hover .descricao, .itemdois:hover .descricaodois{
    display: block;
}

html:

<span class="item"><a href="#"><img src="https://i.imgur.com/8sBmNaN.jpg"/></a>
    <span class="descricao">Recomendado a todas as idades</span>
</span>
<span class="itemdois"><a href="#"><img src="https://i.imgur.com/x4REsTX.jpg"/></a>
    <span class="descricaodois">Hoje o dia pode ser seu</span>
</span>

when hovering the mouse the description affects the image on the side so wanted to leave in a different div or span separate from the image...

Answer 1

You can do javascript directly in the element or separately

The descriptions are in a div separate

• In the element:

.descricao, .descricaodois{
    display: none;
}

<span class="item" onmouseover="document.getElementById('des1').style.display='block'" onmouseout="document.getElementById('des1').style.display='none'"><a href="#"><img src="https://i.imgur.com/8sBmNaN.jpg"/></a>
</span>
<span class="itemdois"  onmouseover="document.getElementById('des2').style.display='block'" onmouseout="document.getElementById('des2').style.display='none'"><a href="#"><img src="https://i.imgur.com/x4REsTX.jpg"/></a>
</span>
<div id="descricoes">
<span class="descricao" id="des1">Recomendado a todas as idades</span>
<span class="descricaodois" id="des2">Hoje o dia pode ser seu</span>
</div>

• Separate script:

document.getElementsByClassName("item")[0].onmouseover = function(){document.getElementsByClassName("descricao")[0].style.display="block";}
document.getElementsByClassName("item")[0].onmouseout = function(){document.getElementsByClassName("descricao")[0].style.display="none";}
document.getElementsByClassName("itemdois")[0].onmouseover = function(){document.getElementsByClassName("descricaodois")[0].style.display="block";}
document.getElementsByClassName("itemdois")[0].onmouseout = function(){document.getElementsByClassName("descricaodois")[0].style.display="none";}

.descricao, .descricaodois{
    display: none;
}

<span class="item" onmouseover="document.getElementById('des1').style.display='block'" onmouseout="document.getElementById('des1').style.display='none'"><a href="#"><img src="https://i.imgur.com/8sBmNaN.jpg"/></a>
</span>
<span class="itemdois"  onmouseover="document.getElementById('des2').style.display='block'" onmouseout="document.getElementById('des2').style.display='none'"><a href="#"><img src="https://i.imgur.com/x4REsTX.jpg"/></a>
</span>
<div id="descricoes">
<span class="descricao">Recomendado a todas as idades</span>
<span class="descricaodois">Hoje o dia pode ser seu</span>
</div>