将鼠标悬停在文本上时，文本并不总是出现

Question

在我的主页上有5个徽标，当悬停在上面时会出现文字。 但有时文本不会出现。

有时（很少），只会出现红色背景。我的代码一定有问题：

HTML

<div class="container1">

    <div class="backgrounds">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>

<a href="..."> 
    <div class="column" >

<div class="hover-lune1">
<img class="aligncenter" src="..."/>
</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>
</a>


<a href="..."> 
same structure
</a>


<a href="...">
same structure
</a>


<a href="...">
same structure
</a>


<a href="...">
same structure
</a>

    <div style="clear:both;"></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;
}

>> same for the other logos



.column { 
position:relative; 
float:left; 
width:18%; 
margin:0 1%; 
}

我的网站：http://www.chooseyourtelescope.com/fr/