CODEWITHSUNDEEP
htmlcss
Koen Hollander
Koen Hollander

Reputation: 1701

How can a child override the opacity of the parent?

Currently I'm working on a website for a community and its getting a bit difficult, I have a nice pink>orange gradient with a image below it with a opacity of 0.2, to show both. That looks like this.

One

As you can see, the logo also has the opacity. I already found something about the rgba-color, but that did'nt work.

How can I solve this problem? I want the image with the border to have a full opacity.

body {
  background-color: #f2f2f2;
  color: #404040;
}

div.navbar {
  height: 600px;
  background: rgba(255, 255, 255, 0.7);
  background-image: linear-gradient(25deg, #ec008c, #fc6767);
  margin-top: -10px;
  margin-left: -5px;
  position: relative;
  width: 105%;
}

img.logo {
  position: absolute;
  margin-top: 4%;
  margin-left: 25%;
  height: 40%;
  padding: 25px;
  border: 25px solid #f2f2f2;
  border-radius: 50%;
}

div.image {
  position: relative;
  height: 100%;
  opacity: 0.2;
  background-image: url("img/slide1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

div.nav {
  position: absolute;
  bottom: 0;
  margin-left: 600px;
  margin-bottom: 50px;
}

a.nav-item {
  color: #f2f2f2;
  font-weight: bold;
  font-size: 25pt;
  margin-right: 50px;
  text-decoration: underline;
}

a.nav-item:hover,
a.nav-item .active {
  text-decoration: overline underline;
}
<div class="navbar">
  <img class="logo" src="img/logo.png">
  <div class="image">
  </div>
  <div class="nav">
    <a class="nav-item">Home</a>
    <a class="nav-item">Twee</a>
  </div>
</div>

Upvotes: 0

Views: 181

Answers (2)

Tienda Angela Haring
Tienda Angela Haring

Reputation: 11

Child can't override opacity of parent due to how opacity is managed by the browsers.

Simplest way to achieve this is to place the visual child after the parent and then use a negative margin-top to draw the child on top of the parent. You don't need absolute positioning.

.frame{
        background-color: #AAAAAA;
        opacity: 0.2;
        border-radius: 13px;
        padding: 21px;
        color: #000000;
        height: 73px;
}
.frametxt{
        margin-top: -73px;
        color: #000000 !important;
        opacity: 1.0;
}

Upvotes: 1

Scrimothy
Scrimothy

Reputation: 2536

Use the background property for both image and gradient. then take your gradient from the rgba equivalents of your hex values (Chrome dev tools color picker is good for this).

body {
  margin: 0;
}

div.navbar {
	height: 100vh;
  
  /*
    IMPORTANT BITS:
    - ADDED image and gradient to navbar background and
    - REMOVED opacity
    
    THE REST:
    The rest was just to make the demo look better/simpler
  */
	background:
    linear-gradient(25deg, rgba(236, 0, 140, 0.7), rgba(252, 103, 103, 0.7)),
    url(http://placeimg.com/1000/600/arch) no-repeat center;
  background-size: cover;

	position: relative; 
}

.logo-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: 0;
  padding-top: 25%;
  border:25px solid #f2f2f2;
  border-radius: 50%;
  overflow: hidden;
}
.logo {
  width: 90%;
  border-radius: 50%;
  position: absolute;
  top: 5%;
  left: 5%;
}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
  <div class="navbar">
    <div class="logo-wrapper">
      <img class="logo" src="http://placeimg.com/200/200/tech/grayscale">
    </div>
  </div>
</body>
</html>

Upvotes: 1

Related Questions