Changing opacity of 2 div background images while hovering over a 3rd ? HTML & CSS only or do I need JS?

Question

I'm trying to transition the opacity of 2 background images in 2 separate divs while hovering over a 3rd using HTML and CSS. Seems fairly straight forward but I have had no luck searching everything I can on hover targets including not:hover, parents siblings etc. Here is a link to my codepen example. My goal is to affect the opacity of box 1 & 2 by only hovering box 3 (blue box) and reverting back on hover out. All suggestions on restructuring and/or styling are welcome. Thanks.

https://codepen.io/NikoVanDam/pen/Ygzjpz

HTML

<body>
  <div class="Container">
    <div class="Box1"></div>
    <div class="Filler1"></div>
    <div class="Box2"></div>
    <div class="Filler2"></div>
    <div class="Box3"></div>
  </div>
</body>

CSS

.Container {
  width: 383px;
  height: 404px;
  background: yellow;
  float: left;
}
.Box1 {
  width: 383px;
  height: 210px;
  background: red;
  float: left;
  opacity: 0.2;
  transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
}
.Filler1 {
  width: 130px;
  height: 194px;
  background: grey;
  float: left;
}
.Box2 {
  width: 253px;
  height: 110px;
  background: blue;
  float: left;
  Opacity: 0.2;
  transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
}
.Filler2 {
  width: 160px;
  height: 84px;
  background: grey;
  float: left;
}
.Box3 {
  width: 93px;
  height: 84px;
  background: blue;
  float: left;
}

Re: re-structuring, you would have to make Box3 the first one in source code order, for this to work - then you can select the other two as siblings following it. With the specific layout you have, that could probably be achieved rather simply, by absolute positioning the blue box to the lower right corner, instead of having it float there naturally - quick example: https://codepen.io/anon/pen/NJWEQM In other cases flexbox’ `order` property can also often be of help regarding such situations. — 04FS, Feb 26 '19 at 07:46
Thanks for the quick reply and sorry for the duplicate question. I thought the hover had to target the container and then address the child elements within and it was confusing me. This works great. — NikoVanDam, Feb 26 '19 at 17:49

score 0 · Answer 1 · answered Feb 26 '19 at 07:04

Unfortunately, there's no pure CSS way to accomplish this as .Box3:hover comes after the elements you're wishing to target. Here's a straightforward JavaScript approach as a consolation prize.

const box3 = document.querySelector('.Box3');
const container = document.querySelector('.Container');
box3.addEventListener("mouseover", handleMouseOver);
box3.addEventListener("mouseout", handleMouseOut);

function handleMouseOver() {
  container.classList.add('hover');
}

function handleMouseOut() {
  container.classList.remove('hover');
}

.Container {
  width: 383px;
  height: 404px;
  background: yellow;
  float: left;
}

.Box1 {
  width: 383px;
  height: 210px;
  background: red;
  float: left;
  opacity: 0.2;
  transition: opacity 0.5s ease-in-out;
}

.Filler1 {
  width: 130px;
  height: 194px;
  background: grey;
  float: left;
}

.Box2 {
  width: 253px;
  height: 110px;
  background: blue;
  float: left;
  Opacity: 0.2;
  transition: opacity 0.5s ease-in-out;
}

.Filler2 {
  width: 160px;
  height: 84px;
  background: grey;
  float: left;
}

.Box3 {
  width: 93px;
  height: 84px;
  background: blue;
  float: left;
}

.hover .Box1,
.hover .Box2 {
  opacity: .7;
}

<body>
  <div class="Container">
    <div class="Box1"></div>
    <div class="Filler1"></div>
    <div class="Box2"></div>
    <div class="Filler2"></div>
    <div class="Box3"></div>
  </div>
</body>

I also appreciate the javascript alternative. This is very helpful. — NikoVanDam, Feb 26 '19 at 17:50

score 0 · Answer 2 · answered Feb 26 '19 at 07:22

You have to use javascript what you want, here a snippet,

(function() {
  var container =  document.querySelector('.Container');
  var hoverBox = document.querySelector('.hover-box');
  hoverBox.addEventListener('mouseover', function(){
    container.classList.add('hovered');
  });
  
  hoverBox.addEventListener('mouseout', function(){
    container.classList.remove('hovered');
  });
})();

.Container {
  width: 383px;
  height: 404px;
  background: yellow;
  float: left;
}
.color-box {
  float: left;
  opacity: 0.2;
  transition: opacity 0.5s ease-in-out;
}
.gray-box {
  background: grey;
 float: left;
}
.Box1 {
  width: 383px;
 height: 210px;
  background: red;
}
.Filler1 {
  width: 130px;
 height: 194px;
}
.Box2 {
  width: 253px;
 height: 110px;
  background: blue;
}
.Filler2 {
  width: 160px;
 height: 84px;
}
.Box3 {
  width: 93px;
 height: 84px;
  background: blue;
 float: left;
}
.hover-box {
  cursor: pointer;
}
.hovered .color-box{
  opacity: .7
}

<body>
  <div class="Container">
    <div class="Box1 color-box"></div>
   <div class="Filler1 gray-box"></div>
   <div class="Box2 color-box"></div>
   <div class="Filler2 gray-box"></div>
   <div class="Box3 hover-box"></div>
  </div>
</body>

Changing opacity of 2 div background images while hovering over a 3rd ? HTML & CSS only or do I need JS?

2 Answers2