ICU

by Hastig Z

HTML

<div class="wrapper">
  <div class="left-under">
    <div class="left-under-circle"></div>
  </div>
  <div class="right-under">
    <div class="right-under-circle"></div>
  </div>
  <div class="left-over">
    <div class="left-over-circle"></div>
  </div>
  <div class="right-over">
    <div class="right-over-circle"></div>
  </div>
</div>

CSS

.wrapper {
  position: relative;
  width: 400px;  height: 200px; 
  border: 1px solid black;
}
.left-under, .right-under {
  position: absolute;
   top: 0;
  width: 200px;  height: 200px;
}
.left-under {
  left: 0;
  background-color: pink;
 }
.right-under {
  right: 0;
  background-color: blue;
 }
.left-under-circle, .right-under-circle {
  position: absolute;
  width: 150px;  height: 150px;
  top: 50%; transform: translateY(-50%);
  background-color: black;
    border-radius: 100%;
}
.left-under-circle {
  right: -20%;
}
.right-under-circle {
  left: -20%;
}







.left-over, .right-over {
  position: absolute;
  top: 0;
  width: 200px;  height: 200px;
  overflow: hidden;
  z-index: 13;
}
.left-over {
  left: 0;
  background-color: hsla(0, 0%, 100%, 0.2);
 }
.right-over {
  right: 0;
  background-color: blue;
  background-color: hsla(0, 0%, 100%, 0.2);
 }
.left-over-circle, .right-over-circle {
  position: absolute;
  width: 150px;  height: 150px;
  top: 50%; transform: translateY(-50%);
background-color: white;
  border-radius: 100%;

}
.left-over-circle {
  right: -55%;
}
.right-over-circle {
  left: -55%;
}

JavaScript

$('.left-over-circle, .right-over-circle').hover(
  function() {
    $('.left-over-circle, .right-over-circle').css('background-color', 'red');
  }, 
  function() {
    $('.left-over-circle, .right-over-circle').css('background-color', 'white');
  }
);