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;
}
}