JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<a href="">
  <div class="card-content--image-wrapper">
    <div class="card-content--inner-image-wrapper" style="background-image: url('https://images.unsplash.com/photo-1582135610771-229cd27db03a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max')"></div>
  </div>
</a>

CSS

a .card-content--image-wrapper {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  box-sizing: border-box;
}

a .card-content--image-wrapper .card-content--inner-image-wrapper {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 56%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  box-sizing: border-box;
}

a:hover .card-content--inner-image-wrapper {
  overflow: hidden;
  box-sizing: border-box;
}

a:hover .card-content--inner-main-content-wrapper {
  overflow: hidden;
  box-sizing: border-box;
}

a:hover .card-content--image-wrapper {
  border-right: 2px solid red;
  border-left: 2px solid red;
  border-top: 2px solid red;
  overflow: hidden;
  box-sizing: border-box;
}