JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<div class="blocks-wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="hidey">testerer</div>
</div><!-- end blocks-wrapper -->
<div class="blocks-wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="hidey">testerer</div>
</div><!-- end blocks-wrapper -->

CSS

.blocks-wrapper {
    font-size: 0;
    margin-bottom: 10px;
    position: relative;
    text-align: center;
}

.block {
  display: inline-block;
  height: 200px; width: 200px;
}

.hidey {
  position: absolute;
  left: 50%;
  top: 50%;  bottom: 50%;
  font-size: 15px;
  z-index: -1;
  color: red;
  transition: all 1s ease;
}

.blocks-wrapper:nth-child(odd) .block:nth-child(1) {  }
.blocks-wrapper:nth-child(odd) .block:nth-child(2) { background-color: #222; }
.blocks-wrapper:nth-child(odd) .block:nth-child(3) { background-color: #111; }

.blocks-wrapper:nth-child(even) .block:nth-child(1) { background-color: #111; }
.blocks-wrapper:nth-child(even) .block:nth-child(2) { background-color: #222; }
.blocks-wrapper:nth-child(even) .block:nth-child(3) {  }


.blocks-wrapper:nth-child(odd) .block:nth-child(2):hover ~ .hidey,
.blocks-wrapper:nth-child(odd) .block:nth-child(3):hover ~ .hidey {  
  left: 15%;
}

.blocks-wrapper:nth-child(even) .block:nth-child(1):hover ~ .hidey,
.blocks-wrapper:nth-child(even) .block:nth-child(2):hover ~ .hidey {  
  left: 75%;
}