CODEWITHSUNDEEP
csshover
Brad Adams
Brad Adams

Reputation: 2069

CSS overlay not appearing over <img>?

The main structure I'm using is:

<div class="portfolio-thumbs">
    <div class="col-md-4 thumb-item">
        <a href="#">
            <div class="thumb-img">
                <img src="./img/portfolio/rocksea.jpg" class="img-responsive" />
                <div class="thumb-overlay"></div>
            </div>
        </a>
    </div>
   ...
</div>

I've created a full JS Fiddle here

I'm looking to add a semi-transparent overlay to the image (will later be adding transition and some content to slide in from bottom of each image), yet can't seem to get it to appear.

Have compared to couple of other articles on SO but none seemed to fit the bill.

I've done this a thousand times before, any idea what's going wrong with this?

Upvotes: 0

Views: 126

Answers (1)

Brad Adams
Brad Adams

Reputation: 2069

With help of @ZachSaucier , adding 100% height to all elements in tree. Also adding:

div.latest-work div.portfolio-thumbs div.thumb-item a div.thumb-img div.thumb-overlay {
    position: absolute;
    top: 0;
}

Made the overlay sit on top of the img.

Updated fiddle here

Upvotes: 1

Related Questions