JSFiddle - React, Tailwind, and code Playground

by Gust van de Wal

HTML

<div class="blobs">
  <div class="blob"></div>
  <div class="blob"></div>
</div>

CSS

body{
  background-color: #FFF;
}

.blobs{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 200px;
  margin: auto;
  background-color: #FFF;
  filter: contrast(15) contrast(.5) sepia(1) brightness(1.85) hue-rotate(319deg) saturate(3.45);
  overflow: hidden;
}

.blob{
  background-color: #000;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  transition: cubic-bezier(.8,0,.25,1) 2.5s;
  box-shadow: 0 0 30px 10px black;
}

.blobs:hover .blob:first-child{
  transform: translate(-50%, -50%) translateX(-70px);
}

.blobs:hover .blob:last-child{
  transform: translate(-50%, -50%) translateX(70px);
}