CODEWITHSUNDEEP
javascripthtmlcss
user3388149
user3388149

Reputation: 11

CSS: Text overlay on images while hover

I've read several tutorials and forums include this and other sources on how to create an hover state description overlay over images. I have also successfully created a version of it. However there is one problem: its not responsive (or it breaks gracefully).

   <div class="section">
    <ul>
        <li>
            <div>
                <p><b>1 unit Mathematics extension</b></p>
                <img src="img/thumbnail.png" alt="Thumbnail">
                <p id="overlay">Placerat massa ut est, in, .</p>
            </div>
        </li>       
    </ul>
</div>

Note*: the reason why i have it in a list is that on desktop and tablet view i want 3 images to appear across the page.

my relevant CSS is:

.section ul{
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0; 
}

.section li{
    width: 100%;
    padding-bottom: 30px;
}

.section img{
    width:90%;
}

#overlay{
    width: 90%;
    position: relative;
    left: 5%;
    bottom: 127px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
}

My problem is the #overlay css, Im trying to align the bottom of the overlay to the bottom edge of the image. however when i do a percentage e.g. bottom: x% it does not work, which forces me to use a fixed px. However when i do this, based on the width of the window the height of the overlay changes and sometimes it results in the bottom edge of the overlay not aligned with the bottom of the edge.

Is there are way to work around this using css and html only?

if anyone is able to provide some input that would be much appreciated it!

Thank you all in advanced.

Upvotes: 1

Views: 447

Answers (2)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

use z-index for #overlay

#overlay{
    width: 90%;
    position: relative;

    bottom: 50px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    z-index:1;
}

DEMO

check the demo and expand and collapse the result window to know the reponsiveness

Upvotes: 2

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

Sometime jQuery is very easy help us incompare of tricky CSS

check this jsFiddle

jQuery (library 1.7.2)

jQuery(document).ready(function(){
    $("img").mouseover(function(){
        $("#overlay").css("z-index","9999");
    });
    $("img").mouseout(function(){
        $("#overlay").css("z-index","-1");
    });
});

Upvotes: 1

Related Questions