CSS border opacity affected by translucent overlay

Question

I have this project:

https://jsfiddle.net/3xw9aqew/

When a user hovers over the grey box, a red overlay appears with a green border/outline. However this border is applied to the overlay which has an opacity value applied to it on hover.

.image-container:hover .overlay {
            opacity: 0.3;
        }

I want the overlay to be translucent, allowing the image below to be seen, but I want the border around this to be solid so its a standard "green" colour. This is the CSS for the overlay:

.overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            transition: .5s ease;
            background-color: red;
            border:10px solid green;
            box-sizing:border-box;
        }

How can i achieve this?

score 0 · Answer 1 · answered Nov 25 '17 at 14:48

For the intended behaviour, apply the required transparency directly to the background-color property value instead of the containing element as a whole. This can be done by adjusting the rgba value as demonstrated in the embedded code snippet below.

opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.

opacity - CSS | MDN

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .5s ease;
  background-color: transparent;
  border: 10px solid transparent;
  box-sizing: border-box;
}

.image-container:hover .overlay {
  background-color: rgba(255, 0, 0, 0.3);
  border: 10px solid green;
}

Updated JSFiddle

Code Snippet Demonstration:

var imgContainer = document.getElementById("imgContainer");
var lorem = document.querySelector(".hdr-left");
var ipsum = document.querySelector(".hdr-right");

//When clicking on imgContainer toggle between class to change colour and position
imgContainer.addEventListener('click', function() {
  lorem.classList.toggle("hdr-color-white");
  ipsum.classList.toggle("hdr-color-white");
  lorem.classList.toggle('hdr-left-middle');
  ipsum.classList.toggle('hdr-right-middle');
});

body {
  max-width: 100%;
  overflow-x: hidden;
  background: yellow;
  font-family: sans-serif;
}

.container {
  width: 85%;
  max-width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img {
  width: 100%;
  max-width: 920px;
}

p {
  font-size: 18px;
  color: blue;
  font-weight: bold
}

p.left {
  position: absolute;
  top: 0;
  bottom: 0px;
  right: -32%;
  transform: rotate(-90deg);
}

p.right {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -32%;
  transform: rotate(90deg);
}

h2 {
  font-size: 5em;
  position: absolute;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  margin: 0;
  z-index: 5;
  color: blue;
  transition: all 0.5s ease-in-out;
}

.hdr-color-white {
  color: white;
}

.hdr-left {
  left: -12%;
  top: -35%;
}

.hdr-left-middle {
  left: 7%;
  top: 40%;
}

.hdr-right {
  right: -10%;
  top: 110%;
}

.hdr-right-middle {
  right: 7%;
  top: 40%;
}


/*Hovers*/

.container:hover {
  cursor: pointer
}

.container:hover>p {
  color: red;
}

.container .image-container:hover {}


/*Hovers Ends*/


/*Overlay*/

.image-container {
  position: relative;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  outline: 5px solid blue;
}

.container .image-container:hover>.image {
  outline: none;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .5s ease;
  background-color: transparent;
  border: 10px solid transparent;
  box-sizing: border-box;
}

.image-container:hover .overlay {
  background-color: rgba(255, 0, 0, 0.3);
  border: 10px solid green;
}


/*Overlay  Ends*/

<div class="container">

  <!--Rotated Text-->
  <p class="right">Harolds</p>
  <p class="left">Harolds</p>
  <!--//Rotated Text-->

  <h2 class="hdr-left hdr-color" id="lorem">Lorem</h2>

  <div class="image-container" id="imgContainer">
    <img src="http://via.placeholder.com/980x550" alt="gucci" class="image">
    <!--colour overlay-->
    <div class="overlay"></div>
    <!--//colour overlay-->
  </div>

  <h2 class="hdr-right hdr-color" id="ipsum">Ipsum</h2>

</div>

CSS border opacity affected by translucent overlay

1 Answers1