JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

SCSS

body {
  padding: 50px;
}
.wrapper {
  display: flex;
  padding: 0 15px;
  border-top: 1px solid #666;
}

.block {
  margin: 0 10px;
  width: 25%;
  position: relative;
  top: 0;
  border: 1px solid #aaa;
  transition: all 200ms ease;

  &::before {
    display: block;
    padding-top: 100%;
    content: '';
  }

  &:nth-child(1) {
    order: 2;
    background: #ccc;

    &:hover {
      top: 20px;
           
      & ~ .block {
        top: 10px;
      }
    }
  }

  &:nth-child(2) {
    order: 3;
    background: #eee;

    &:hover {
      top: 20px;      
      
      & + .block {
        top: -20px;
      }
    }
  }

  &:nth-child(3) {
    order: 1;
    background: #bbb;
  }
}