1

I want to make the nested element (.portrait) to be opaque while the parent remains translucent. Code snippet is below (written in SCSS).

    &-branding {
        opacity: 0.9;
        background: $primary-color;
        transform: translate3d(0, 100%, 0);
        @include easeOut;
        &.show {
            // Slide in from bottom
            transform: translate3d(0, 0, 0);
        }
        .portrait {
            width: 250px;
            height: 250px;
            background: url("../../img/portrait.jpg");
            border-radius: 50%;
            border: solid 3px $secondary-color;
        }
    }
Ash2201
  • 11
  • 2
  • 1
    Do you only want the background of the parent container to be translucent? If so, you can use the background rgba property which takes the color and then the opacity to make only the background translucent. This way, the children won't be affected by opacity changes. background:rgba($primary-color, 0.9); – Xenvi Jul 03 '20 at 04:06
  • 1
    Yes, this works, thank you! – Ash2201 Jul 03 '20 at 04:55

0 Answers0