Overlay with a progress bar that obscures visibility

Question

Overlay with a progress bar that obscures visibility

I'm dealing with a progress bar that needs to be displayed on top of an overlay. If you take a look at this jsfiddle, you can see the issue.

Here's the markup:

<div class="overlay mouse-events-off">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 40%;"></div>
    </div>
</div>

And here's the CSS:

.overlay { background-color: black; position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.2; z-index: 100; }
.progress { position: absolute; top: 50%; left: 35%; width:300px; height:20px; z-index:101; opacity:1.0; }

The progress bar also has a 20% opacity, which is causing issues.

I did find a workaround by moving the <div> holding the progress bar outside of the overlay, but it feels like unnecessary extra markup.

Here's the updated working markup:

<div id="progress" style="display:none;">
    <div class="progress progress-striped active glow">
        <div class="bar" style="width: 40%;"></div>
    </div>
    <div class="overlay mouse-events-off"></div>
</div>

Is there a more elegant solution using just CSS?

css twitter-bootstrap

Answer 1

Answer №1

When utilizing the opacity property, all content inside that particular element will be impacted without any workarounds available.

You have a couple of options to achieve this effect:

Option 1: Progress Outside

Place the progress bar outside the overlay and adjust its position to be centered on top of the overlay.

.progress {
    position: absolute;
    top: 50%;
    left: 50%;
    width:300px;
    height:20px;
    margin:-10px 0 0 -150px; //half width left, half height top
    z-index:101;
    opacity:1.0;
}

Option 2: Keeping as is

Rather than applying opacity directly to the element itself, apply it to the background instead!

.overlay {
    background-color: black; /*for older browsers*/
    background-color: rgba(0,0,0,.2); /*newer browsers will override the 'black' color with rgba*/
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*opacity:0.2; avoid using opacity!*/
    z-index: 100;
}

For the second approach, check out the jsFiddle link provided: http://jsfiddle.net/Qpv4E/2/

Answer 2

When utilizing the opacity property, all content inside that particular element will be impacted without any workarounds available.

You have a couple of options to achieve this effect:

Option 1: Progress Outside

Place the progress bar outside the overlay and adjust its position to be centered on top of the overlay.

.progress {
    position: absolute;
    top: 50%;
    left: 50%;
    width:300px;
    height:20px;
    margin:-10px 0 0 -150px; //half width left, half height top
    z-index:101;
    opacity:1.0;
}

Option 2: Keeping as is

Rather than applying opacity directly to the element itself, apply it to the background instead!

.overlay {
    background-color: black; /*for older browsers*/
    background-color: rgba(0,0,0,.2); /*newer browsers will override the 'black' color with rgba*/
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*opacity:0.2; avoid using opacity!*/
    z-index: 100;
}

For the second approach, check out the jsFiddle link provided: http://jsfiddle.net/Qpv4E/2/

Answer 3

Answer №2

Here is a similar query: Avoid inheriting child opacity from parent in CSS

Expectantly, RaphaelDDL's solutions will provide assistance.

Answer 4

Here is a similar query: Avoid inheriting child opacity from parent in CSS

Expectantly, RaphaelDDL's solutions will provide assistance.

Overlay with a progress bar that obscures visibility

Answer №1

Option 1: Progress Outside

Option 2: Keeping as is

Answer №2

Similar questions

Looking for an Angular Material component that displays a list of attributes?

The Weglot country selector is not properly aligned with the rest of the content and its hover

Unable to apply 3rd condition with ngClass into effect

Ensure that the divs are properly aligned and construct columns within a single column

Styling Material UI components with CSS is a great way to

The div is not showing the image as expected

How can I style the inner div by adding a class to the first div?

Ways to align text within a table cell on a background using CSS

What role does the sequence play in matrix transitions that involve rotating and translating simultaneously?

Hide the footer DIV in CSS by making it disappear with a height of 100%

Dynamic CSS columns with a set width on the left and right sides

Tips for passing a timestamp to a Postgresql DB using a Button in a Form instead of a traditional rails time_select box

What causes certain content to be inaccessible when using Safari?

A guide to adjusting the size of a mat-button using an svg mat-icon

The CSS selectors wrapped in jQuery vary between Chrome and Internet Explorer 11

Is there a way to show output on render rather than using console.log in node.js?

The ">" CSS child selector does not seem to be functioning correctly with specific properties

Stripping out only the position attribute using jQuery

Adjust the size of the HTML input font to decrease as additional text is entered

Techniques for breaking down large CSS files into modules and combining multiple smaller CSS files