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.

cssimageopacityabsolute

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic Code for Removing List Items Based on Date

I need assistance in resolving an issue with my company's website design and function. Specifically, I am working on a page that displays a list of events where employees will be present throughout the year. Here is an example: <div class="contai ...

javascriptjqueryhtmlcss

The fluid table within the Bootstrap container is not adapting to different screen

Can't figure out why the bootstrap container fluid table is not responsive. Even though I used an example of My First Bootstrap Page that works fine and is responsive, this particular table remains unresponsive. I want to avoid using a scroll but will ...

phphtmlcssbootstrap-4

Tailored alignment of checkboxes and labels

I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...

csscheckbox

When an item in the accordion is clicked, the modal's left side scroll bar automatically scrolls to the top. Is there a solution to prevent this behavior and

When I first load the page and click on the Sales accordion, then proceed to click on Total reported and forecasted sales, the scrollbar jumps back up to the top The marked ng-container is specifically for the UI of Total reported and forecasted sales He ...

javascripthtmlcssangularangular-material

Ways to disable the ability to close a bootstrap modal by pressing the backspace key

How can I enable the backspace button in a Bootstrap Modal form for textboxes and textareas? $('body').keydown(function (e) { if ($('#myModal').is(':visible')) { if (e.keyCode == 8) { retu ...

javascriptjquerycsstwitter-bootstrap

Learn how to trigger an animation when hovering over an element, and how to pause it once the hover is

I am facing an issue with a button that I want to rotate upon mouse hover. The problem is, the rotation works perfectly when the mouse enters, but it continues spinning even after the mouse leaves. Here's the code snippet for better understanding: ...

csscss-animations

The embedded Google iframe is causing unnecessary padding at the bottom of the page

Below is a snippet of HTML code: <div class="google-maps"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109782.8671228349!2d76.62734023564995!3d30.69830520749905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fee90 ...

htmlcssiframe

Is there a way to incorporate a dropdown feature into a search bar using Ant Design?

I'm currently working on a project that requires me to incorporate two drop-down menus inside the search box. Despite following the guidelines provided in the documentation (https://ant.design/components/input), I encountered a problem when trying to ...

cssreactjstypescriptantd

Is there a way for me to perfectly align the image and the h1 header on the webpage?

I'm facing some challenges when it comes to aligning an image and an h1 tag on the same line. I've already tried using display: inline and inline-block, but they only affect the container of the two elements. I also set the width to 100% on the s ...

htmlcsscss-position

How can I eliminate the gap above the footer in iframes alignment?

I have a setup with four iframes: header, menuframe, bodyframe, and footer. The menuframe and bodyframe are positioned next to each other with space between the footer and the menuframe/bodyframe. How can I remove this space? Here is the CSS: iframe{ ...

cssiframe

Semantic UI table with rowspan feature

I am a beginner with semantic ui and I have been trying to replicate this specific layout. While going through semantic ui's documentation, I found something similar but not quite identical. Below is the HTML code: <div class="ui celled grid cont ...

htmlcsssemantic-ui

Can you use "or" or "not" syntax with CSS input type selectors?

In the world of programming, if they actually exist, Suppose I have created an HTML form with the following input fields: <input type="text" /> <input type="password" /> <input type="checkbox" /> I wish to style all input fields that a ...

htmlcsscss-selectors

Data extracted from the range selector

Is there a way to take values and use them for hiding or displaying certain divs? I have been using jQuery Simple Slider for this purpose. I attempted the following code, but it did not work well. I want the div with id "3" to be visible when the slider ...

javascriptjqueryhtmlcss

The background color of the div or section is stubbornly refusing to change, no matter how much I tweak it

.forBackground { background-color: white; } .kontaktUndMapContainer { width: 100%; padding: 20px; color: gray; text-align: center; } .überschriftKontakt { margin-bottom: 20px; } .überschriftKontakt2 { margin-top: 20px; margin-bottom: 2 ...

htmlcssfrontendmobile-website

Aligning columns next to one another using flexbox in a centered manner

I am attempting to create a layout with 3 columns, but I want any extra columns beyond a multiple of 3 to be centered instead of aligned left. While I have made progress, the issue I'm facing is that the additional columns are not centered relative t ...

htmlcssflexbox

Concealing the path of a file input in CSS

Similar Question: How to Conceal Input File Path in HTML File Upload Hello there! I was wondering if it's feasible to conceal the input file path and only display the browse button? Thanks a lot! Lucas ...

cssinput-type-file

Tips on completing landing page animations and displaying the main page of a website by utilizing React JavaScript

https://i.stack.imgur.com/M4VgY.pngIs there a way to stop the landing page animation after 2-3 seconds and show the main page instead? Can I achieve this by using setTimeOut function in JavaScript? [ export default Loader; ...

javascripthtmlcssreactjs

Is it possible to display a subtle grey suggestion within an HTML input field using only CSS?

Have you ever noticed those text input boxes on websites where a grey label is displayed inside the box, but disappears once you start typing? This page has one too: the "Title" field works the same way. Now, let's address some questions: Is ther ...

javascripthtmlcsstextboxlabel

Tips for positioning text on the left and right sides of a div in HTML styling

I am struggling with positioning two pieces of text within a div. Despite having some styling already in place, the text is currently displaying one after the other on the left-hand side. I want to position one piece of text to the left and another to the ...

javascripthtmlcssreactjs

The moving div suddenly halts before continuing its journey

Two overlapping divs create an interesting sliding effect. A gray div slides in from the top over a black div. Hovering your mouse over the black div causes the gray one to slide out of view. If you hover over the gray div, it also slides out but pauses ...

jqueryhtmlcss