javascripthtmlcsshover

Text hover over an image

How can I make a text hover over a image? I want the text box to apear exactly over where the image is positioned, so that the image dissapears completly, and on mouse out the image reapears. I searched everywere but I only found hover effects with different positionig of the hoverbox from where the image is situated...

Solution

  • css:

    .textHover {
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0; left:0;
    text-align:center;
    color:white;
}
.imgContain {
    position:relative;
    display:table;
}
.imgContain:hover .textHover {
    display:block;
}

    markup:

    <div class="imgContain">
    <img src="http://placehold.it/300x200"/>
    <div class="textHover">My text here</div>
</div>

    http://jsfiddle.net/EACxV/