• 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!

The topic ‘Problem with hover – Text does not appear’ is closed to new replies.