<body>
  <div id="container">
    <div id="box1">
      <p>I'm getting changed..!!</p>    
    </div>
    <div id="box2">
      <p>I'm getting changed..!!</p>
    </div>
    <div id="box3">
      <p>Hover for <br><span>Previous</span> (?)</br> sibling selector</p>
    </div>
    <div id="box4">
      <p>Hover for <br><span>General Previous</span> (!)</br> sibling selector</p>
    </div>
    <div id="box5">
      <p>Hover for <br><span>General Next</span> (~)</br> sibling selector</p>
    </div>
    <div id="box6">
      <p>Hover for <br><span>Next</span> (+)</br> sibling selector</p>
    </div>
    <div id="box7">
      <p>I'm getting changed..!!</p>
    </div>
    <div id="box8">
      <p>I'm getting changed..!!</p>
    </div>
  </div>
</body>
<script src="https://rouninmedia.github.io/axe/axe.js"></script>

* {
  margin: 0;
  left: 0;
  top: 0;
  cursor: pointer;
}
body {
  display: flex;
  justify-content: center;
  place-items: center;
  height: 100vh;
  width: 100vw;
  background: #1da1f2;
}
#container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  place-items: center;
}
#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8 {
  display: flex;
  width: 10vw;
  height: 12vw;
  margin: 1vw;
  border-radius: 1vw;
  background: #ffffff;
  justify-content: center;
  align-items: center;
  transition: .3s ease-in-out;
}
#box3:hover ? #box2 {
  transform: scale(1.2);
  box-shadow: 
    0px 10px 40px rgba(0,0,0,.5),
    0px 0px 60px rgba(0,0,0,.5);
}
#box4:hover ! #box2 {
  transform: scale(1.15);
  box-shadow: 
    0px 10px 40px rgba(0,0,0,.5),
    0px 0px 60px rgba(0,0,0,.5);
}
#box4:hover ! #box1 {
  transform: scale(1.15);
  box-shadow: 
    0px 10px 40px rgba(0,0,0,.5),
    0px 0px 60px rgba(0,0,0,.5);
}
#box5:hover ~ #box7 {
  transform: scale(1.15);
  box-shadow: 
    0px 10px 40px rgba(0,0,0,.5),
    0px 0px 60px rgba(0,0,0,.5);
}
#box5:hover ~ #box8 {
  transform: scale(1.15);
  box-shadow: 
    0px 10px 40px rgba(0,0,0,.5),
    0px 0px 60px rgba(0,0,0,.5);
}
#box6:hover + #box7 {
  transform: scale(1.2);
  box-shadow: 
    0px 10px 40px rgba(0,0,0,.5),
    0px 0px 60px rgba(0,0,0,.5);
}
#box3, #box4, #box5, #box6 {
  box-shadow: 
    0px 10px 40px rgba(0,0,0,.5),
    0px 0px 60px rgba(0,0,0,.5);
}
#box1, #box2, #box7, #box8 {
  opacity: .9;
} 
p {
  color: black;
  text-align: center;
  font-size: 1.4vw;
  font-family: 'Roboto', sans-serif;
}
span {
  text-decoration: underline;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.