Setting the opacity of an image will also make the absolute div transparent

Question

Setting the opacity of an image will also make the absolute div transparent

I currently have an image gallery set up with the following structure :

<div class="gallery">
    <div class="message">
        Welcome to the gallery
    </div>    
    <img src="http://placehold.it/300x300" />
</div>

Here is the accompanying CSS :

.message {
    position:absolute;
    left:10px;
    top:20px;
    height:30px;
    width:140px;
    background:#333;
}
.gallery img {
    opacity:.85;
}

However, the issue I'm facing is that the message div also becomes transparent. How can I prevent this and what is causing this transparency?

Check out the DEMO here.

css image opacity absolute

Answer 1

Answer №1

It appears that the image is covering the message div. I was able to resolve this by switching their positions as follows:

<img src="http://placehold.it/300x300" />
<div class="message">
    Welcome to the image gallery
</div>

This solution worked for me.

Check out the fiddle here!

Alternatively, you can adjust the z-index of the message like so:

.message {
    position:absolute;
    left:150px;
    top:20px;
    height:30px;
    width:140px;
    background:#333;
    z-index: 2;
}

.gallery img {
    opacity:.85;
}

Another version of the fiddle here!

Answer 2

It appears that the image is covering the message div. I was able to resolve this by switching their positions as follows:

<img src="http://placehold.it/300x300" />
<div class="message">
    Welcome to the image gallery
</div>

This solution worked for me.

Check out the fiddle here!

Alternatively, you can adjust the z-index of the message like so:

.message {
    position:absolute;
    left:150px;
    top:20px;
    height:30px;
    width:140px;
    background:#333;
    z-index: 2;
}

.gallery img {
    opacity:.85;
}

Another version of the fiddle here!

Answer 3

Answer №2

If you want to reduce the opacity of an image, you could assign it an id

#img{ opacity: 85%; }
<img src="http://placehold.it/300x300" id="img" />

Alternatively, you could use a class instead

.img{ opacity: 85%; }
<img src="http://placehold.it/300x300" id="img" />

Therefore, your code would look something like this:


    <div class="gallery">
    <div class="message">
        Welcome to the image gallery
    </div>    
    <img src="http://placehold.it/300x300" class="img"/>
</div>
#img{ opacity: 85%; }
.img{ opacity: 85%; }
.message {
    position:absolute;
    left:10px;
    top:20px;
    height:30px;
    width:140px;
    background:#333;
}

I hope this information is helpful for you! Check out the demo here.

Answer 4

If you want to reduce the opacity of an image, you could assign it an id

#img{ opacity: 85%; }
<img src="http://placehold.it/300x300" id="img" />

Alternatively, you could use a class instead

.img{ opacity: 85%; }
<img src="http://placehold.it/300x300" id="img" />

Therefore, your code would look something like this:


    <div class="gallery">
    <div class="message">
        Welcome to the image gallery
    </div>    
    <img src="http://placehold.it/300x300" class="img"/>
</div>
#img{ opacity: 85%; }
.img{ opacity: 85%; }
.message {
    position:absolute;
    left:10px;
    top:20px;
    height:30px;
    width:140px;
    background:#333;
}

I hope this information is helpful for you! Check out the demo here.

Setting the opacity of an image will also make the absolute div transparent

Answer №1

Answer №2

Similar questions

Resizing Images Responsively Using Bootstrap

What is the best way to select an element that is currently visible but hidden underneath another element?

Moving the sidebar from the app component to a separate component in Angular results in a situation where the sidebar does not maintain full height when the page is scrolled down

Display a tooltip when you click on a different element

`Locating an image alongside text for seamless integration`

After filling out the form, the user's entered information is instantly shown on the same page

The active link color for navigation in Bootstrap 4

Learn how to swap out the traditional "back to top" button with a customized image and make it slide onto or off the page instead of simply fading in and out

What is the best way to include a subscript (small letter) beneath a word using html and css bootstrap 5?

Transform your Email Template with Inline Styling to mimic a Bootstrap grid, ranging from col-md-6 to col-12 styling

Implementing the insertion of a <div> element within an input field using jQuery

I'm curious about the specific sequence of CSS properties order recommended by Stylelint. Where can I locate

The text consistently remains positioned to the right of my image

Angular is unable to eliminate the focus outline from a custom checkbox created with Boostrap

What specific @media query should be used to target Windows Phone 8+ with high resolution?

Arrange text and a button side by side in a table cell using an Angular directive and an HTML template

Experiencing challenges with showcasing numerical values in the grid cells

Looking to display a gif when a user clicks a button

When the browser size shrinks, turn off the drop-down navigation menu

Updating style in Javascript can sometimes be a bit tricky