JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="list">

  <div class="item hover-shadow">
    <img src="http://placehold.it/100x100" alt="">
  </div>

  <div class="item hover-shadow">
    <img src="http://placehold.it/300x300" alt="">
  </div>

  <div class="item has-hover-shadow">
    <div class="hover-shadow">
      <img src="http://placehold.it/300x300" alt="">
    </div>
    <p>some text</p>
  </div>

  <div class="item hover-shadow"></div>
</div>

SCSS

.list {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  margin: 0.5rem;
}

.has-hover-shadow {
  &:hover {
    .hover-shadow:after {
      opacity: 1;
    }
  }
}

.hover-shadow {
  position: relative;
  &::after {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition-property: opacity, transform;
    transition-duration: 0.3s;
    width: 100%;
    z-index: -1;
  }

  &:hover::after {
    opacity: 1;
  }
}

img {
  display: block;
}