JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="wheel">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
   </div>
</div>

SCSS

@keyframes zoomIn {
  from {
    opacity:1;
    transform: scale3d(1, 1, 1) translate(-50%, -50%);
    
  }

  50%, 100% {
    opacity:0;
    transform: scale3d(2, 2, 2) translate(-25%, -25%);
  }

}

@keyframes zoomIn2 {
  from {
    opacity:0;
    transform: scale3d(.3, .3, .3) translate(-50%, -50%);
    
  }

  50%, 100% {
    opacity:1;
    transform: scale3d(1, 1, 1) translate(-50%, -50%);
  }

}


.wrap {display:flex; flex-wrap:wrap; position: relative;
  & > .item {flex:1 1 50%; max-width:50%; height: 290px;
      &:nth-child(1) {background:crimson;
        &:hover {
           ~ .wheel > span:nth-child(1){ 
            &:before {background-color: white; animation-name: zoomIn; }  
            &:after {animation-name: zoomIn2;}
           }
        }
      }
			&:nth-child(2) {background:tomato;
        &:hover {
           ~ .wheel > span:nth-child(2){ 
            &:before {background-color: white; animation-name: zoomIn; }  
            &:after {animation-name: zoomIn2;}
           }
        }
      }
			&:nth-child(3) {background:limegreen;
        &:hover {
           ~ .wheel > span:nth-child(3){ 
            &:before {background-color: white; animation-name: zoomIn; }  
            &:after {animation-name: zoomIn2;}
           }
        }
      }
			&:nth-child(4) {background:navy;
         &:hover {
          ~ .wheel > span:nth-child(4){ 
            &:before {background-color: white; animation-name: zoomIn; }
            &:after {animation-name: zoomIn2;}
           }
        }
      }
  }
  & > .wheel {position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:flex; flex-wrap:wrap; background-color: white; border-radius:100%; width:1em; height:1em; font-size: 60px; overflow: hidden;
    span {flex:1 1 50%; max-width:50%; height: 50%; position:relative;
      &:before,
      &:after {content:""; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
      &:before {border-radius:100%; width: 5px; height:...