Problem with hover – Text does not appear

I want texts appear when hovering the logos. It works most of the times but sometines only the red background appear behind the logos, but not the text below, and I have to refresh the page to make it work again.

http://www.chooseyourtelescope.com/fr/

There must be something wrong with my html or CSS. Here is an example of it with the moon (LUNE) logo:

HTML

<div class=”column” >
<img src=”http://www.chooseyourtelescope.com/wp-content/uploads/2015/03/1.-Lune-90.png&#8221; alt=”lune” class=”logos90″ />
<div class=”hover-lune1″>
<img class=”aligncenter” src=”http://www.chooseyourtelescope.com/wp-content/uploads/2015/03/Lune-43.png&#8221; alt=”LUNE” /></div>

<div class=”hover-lune2″ ><h2>LUNE</h2>
<p style=”padding:0 10px 20px 10px; text-align:center”>Quel instrument faut-il choisir pour observer la Lune ?</p>
</div>
</div>

CSS

.hover-lune1:hover {
background:#dd0000;
}
.hover-lune1 {
width:43px;
margin-left:59px
}
.hover-lune2 {
display:none;
}
.hover-lune1:hover + .hover-lune2 {
display:block;
width:200px;
position:relative;
top:-13px;
left:-20px;
z-index:-2;
text-align: center;
}

Please help!