JSFiddle - React, Tailwind, and code Playground

by Landon Call

HTML

<div class="gradient">
  <div class="image">
    <h2>
      Jake Brown
    </h2>
  </div>
</div>

SCSS

.gradient {
  align-items: flex-end;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  background: linear-gradient(to right, rgba(195, 32, 52, 0.83) 0%, rgba(36, 11, 54, 0.83) 100%);
  width: 300px;
  height: 300px;

  .image {
    align-items: flex-end;
    background-image: url(https://huish.landoncall.com/wp-content/uploads/2019/03/emily-jacobsen.jpg);
    background-size: cover;
    display: flex;
    height: 100%;
    width: 100%;

    h2 {
      color: white;
      display: none;
      padding-left: 20px;
    }

    &:hover {
      opacity: 0.2;
      transition: opacity ease-in 0.7s;

      h2 {
        display: initial;
      }
    }
  }
}