Positioning overlay over image

Question

Problem

I'm trying to position an color block/overlay background: rgba(34, 34, 34, 0.73); on top of an image when it is hovered over.

Tried using z-index to push the overlay to the front as it seems to be sitting behind the image, while I have a feeling that my positioning position: relative may be the problem, changing it to position: absolute has made the overlay jump way out of position.

I've looked into the previously posed questions and haven't had too much luck.

Github repo for Angular project: https://github.com/onlyandrewn/angular

home.html

---
name: home
url: /
---

<div ng-controller="MainCtrl">
    <header>
        <p class="sponsored" id="top">Sponsored by </p>
        <img src="http://placehold.it/200x30" class="sponsors" alt="">
        <h1>Business Directory</h1>
        <div class="find">
            <input type="search" placeholder="What are you looking for?" ng-model="query">
        </div><!-- /.find -->
    </header>

    <div class="businesses">
        <div class="storeIcon">
            <img src="/assets/img/store.png" class="store" alt="">
        </div><!-- /.storeIcon -->

        <p class="number">Search {{businesses.length}} businesses in Brandon</p><button class="filter button">Filter by <i class="fa fa-chevron-down"></i></button>
        <div class="options">
            <div class="cat">
                <div class="categories">
                    <div class="group">
                        <p class="name">Grade Level</p>
                        <div class="check">
                            <input type="radio" name=""><p>Auto</p>
                            <input type="checkbox" name=""><p>Restaurant</p>
                            <input type="checkbox" name=""><p>Other</p>
                        </div><!-- /.check -->
                    </div><!-- /.group -->

                    <div class="group">
                        <p class="name">School Type</p>
                        <div class="check">
                            <input type="checkbox">
                            <input type="checkbox">
                            <input type="checkbox">
                            <input type="checkbox">
                            <input type="checkbox">
                        </div><!-- /.check -->
                    </div><!-- /.group -->
                </div><!-- /.categories -->
            </div><!-- /.cat -->
        </div><!-- /.options -->
    </div><!-- /.businesses -->



    <div class="all">
        <div class="business large-4.columns" data-ng-repeat="business in businesses | filter:query | orderBy:'name'" >
            <div class="overlay">
                <img src="http://placehold.it/300x300" class="storefront" alt="">
            </div><!-- /.overlay -->
            <div class="info">
                <p class="name">{{business.name}}</p>
                <p class="description">{{business.description}}</p>
                <p class="address">{{business.address}}</p>
                <a href="" class="website">{{business.website}}</a>
            </div><!-- /.info -->
        </div>
    </div>

    <footer>
    <hr>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-facebook"></i>

    <div class="backContainer">
        <a href="#top"><p class="back">Back to top</p></a>
    </div><!-- /.backContainer -->
    </footer>
</div>

custom.scss (Code snippet, for brevity)

/*----------------------------------
OVERLAYS
----------------------------------*/

.overlay {
  background: rgba(34, 34, 34, 0.73);
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  opacity: 0;

  &:hover {
    opacity: 1;
  }
}

.storefront {
  position: relative;
}

Answer 1

You can achieve what you want without changing your markup:

.overlay {
    position: relative;
    width: 300px;
    height: 300px;
}
.overlay:hover:after {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(34, 34, 34, 0.73);
    position: absolute;
    left: 0;
}

<div class="overlay">
    <img src="http://placehold.it/300x300" class="storefront" alt="" />
</div><!-- /.overlay -->

The reason your current overlay doesn't work is because your image is a child element of overlay. You can think of the img element as sitting on top of it's parent (.overlay). It isn't possible for the parent to sit on top of its child elements.

Answer 2

Take a look at this, I've done a little example which shows you how to do an overlay in CSS. Hope this helps you out.

If you want to add an image instead of just changing the opacity or overlaying with colour. Just add this line into the #overlay:hover

background-image: url("imagePath");

Also remove the opacity, as you don't need to change the opacity if you want to use a image

Example:

div { position: relative; float: left; }
img { display: block; }

#background { background: red; }
#background:hover img { opacity: 0.5; }

#overlay span {
    background: red;
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

#overlay:hover span { opacity: 0.5; }

<!-- Uses background color to fade color from behind. -->
<div id="background">
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" />
</div>
    
<!-- Uses empty span to overlay color. -->
<div id="overlay">
    <span></span>
<div>