gigaboy

w3-opacity problem

3 posts in this topic

I have a box overlayed on a background image. The overlay container has an image. When the image is placed on top of the overlay, the image is made transparent to the same opacity of the overlay. I've tried to use w3-opacity-0 to correct this, without success.

 

You can view the page in question here: https://bonus.udll.com (left dark box, look at the picture of the free chapter)>

 

<div class="w3-cell w3-margin-0 w3-black w3-opacity-min w3-text-white w3-padding-large w3-mobile w3-center block-width">

<img
class="w3-black img-margins"
src="//bonus-udll.imgix.net/rosemarieMarkKeiko-cropped.jpg?w=302"
alt="Rosemarie Rossetti, Ph.D., Mark Leder, and Keiko">
</div>
Thanks!
Mark

Share this post


Link to post
Share on other sites

Opacity is an inherited property, the opacity of an element is relative to the opacity of its parent.

 

You should not set the opacity of the parent, instead use an rgba color for the background and use transparent pngs for any background images.

Share this post


Link to post
Share on other sites

OR you could add a container:using ::before with content: to apply the transparent colour to

.w3-cell.w3-margin-0.w3-black.w3-opacity-min.w3-text-white.w3-padding-large.w3-mobile.w3-center.block-width {
    position: relative;
}

.w3-cell.w3-margin-0.w3-black.w3-opacity-min.w3-text-white.w3-padding-large.w3-mobile.w3-center.block-width::before {
    background-color: #000;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.75;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

Might be better to give this a specific class to apply this though.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now