JSFiddle - React, Tailwind, and code Playground

HTML

<div class="projects-grid-setup">
  <!--Project Start-->
  <a
     class="projects-tile"
     href="google.com"
     target = "_blank"
     >
    <div class="crossfade">
      <img 
           class="projects-tile-picture top fade"
           src="top-picture-link"
           />
      <img 
           class="projects-tile-picture"
           src="bottom-picture-link"
           />
    </div>
    <p class="projects-tile-title">
      Project Area 1
    </p>
  </a>
  <!--Project End-->
  <!--Project 2 Start-->
  <a
     class="projects-tile"
     href="google.com"
     target = "_blank"
     >
    <img 
         class="projects-tile-picture"
         src="picture-link1"
         />
    <p class="projects-tile-title">
      Project Area 2
    </p>
  </a>
  <!--Project End-->
</div>

CSS

.projects-grid-setup {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    grid-gap: 0.9rem;
    width: 98.3%;
    margin: 0 auto;
    margin-bottom: 1rem;
}
.projects-tile {
    background: black;
}
.projects-tile-picture {
    width:100%;
    height:100%;
    object-fit: cover;
}
.crossfade {
    position: relative;
}
.crossfade img.fade {
    position: absolute;
    left: 0;
    opacity: 1;
    -webkit-transition: opacity 0.55s ease-in-out;
    -moz-transition: opacity 0.55s ease-in-out;
    -o-transition: opacity 0.55s ease-in-out;
    -ms-transition: opacity 0.55s ease-in-out;    
    transition: opacity 0.55s ease-in-out;
}
.crossfade img.top:hover {
    opacity:0;
}