Text inside div over black overlay WITHOUT opacity

Question

I'm implementing an on-boarding similar to Medium's which has text in the center of the box over an black-overlay with the background-image behind it.

However, I'm struggling with making the text INSIDE the div with the background-image NOT having opacity effect.

<div class="blackBackground">
    <div class="topicImage opacityFilter" style="background-image: url(https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3);">
        <p class="text-inside-image">Fashion</p>
    </div>
</div>

Here's my CSS:

.blackBackground {
  background-color: black;
  z-index: -1;
}

.opacityFilter {
  opacity: 0.8;
  position: relative;

}

.margin-bottom-negsix {
  margin-bottom: -6px !important;
}


.topicImage {
    padding-bottom: 75%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    position: relative !important;
    height:150px;
    background-color: rgba(0, 0, 0, 0.8) !important;

}

.text-inside-image {
  position: absolute;
  top: 20%;
  left: 35%;
  color: white;
  font-size: 24px;
  font-weight: 500;
  z-index: 1;
}

I've tried several solutions such as CSS - Opaque text on low opacity div? and How to keep text opacity 100 when its parent container is having opacity of 50

and a couple more, but no luck.

My progress with my JSFiddle is here: https://jsfiddle.net/RohitTigga/akz5zng7/1/

Why is this occurring and how to fix it?

I've been trying to set the opacity on the background rather than the element; however, that fails to even change the opacity... why? — Rohit Tigga, Jul 11 '16 at 01:48
Why was this down-voted? Explain yourself. I spent time researching solutions, provided as much context as possible, and put a JSFiddle for convenience. What did I do wrong???? — Rohit Tigga, Jul 11 '16 at 02:41

score 2 · Answer 1 · answered Jul 11 '16 at 02:03

Hi change your HTML like this

HTML

<div class="my-container">  
    <h1 class="text-inside-image">Fashion</h1>
    <img src="https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3">
</div>

CSS

.my-container {
    position: relative;
    background: #5C97FF;
    overflow: hidden;
}
.my-container h1 {
    padding: 50px;
    text-align: center;
    z-index: 2;
    position: relative;
    color: #fff;
} 
.my-container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 0.6;
}

for reference https://plnkr.co/edit/YugyLd8H5mQExzF61rA9?p=preview

score 0 · Answer 2 · answered Jul 11 '16 at 06:22

0

You have set a translucent background colour on the element and then covered it up with a background image.

If you want the background image to be translucent, use an image that is intrinsically translucent. The PNG image format supports this.

answered Jul 11 '16 at 06:22

Quentin

914,110
126
1,211
1,335

Text inside div over black overlay WITHOUT opacity

2 Answers2