JSFiddle - React, Tailwind, and code Playground

HTML

<div class="team">
  <div class="single-item">
    <div class="image">
      <div class="image_overlay">
        <a href="#">facebook</a>
      </div>
      <img src="https://www.camocagi.org/air/sites/default/files/client-image-1.jpg" alt="John Filmr Doe">
    </div>
    <div class="name">John Filmr Doe</div>
    <div class="post">Manging Director</div>
  </div>
  <div class="single-item">
    <div class="image">
      <div class="image_overlay">
        <a href="#">facebook</a>
      </div>
      <img src="https://www.camocagi.org/air/sites/default/files/client-image-1.jpg" alt="Chystine Hineu">
    </div>
    <div class="name">Chystine Hineu</div>
    <div class="post">Load Designer</div>
  </div>
</div>

SCSS

.single-item{
		width: calc(50% - 24px);
		margin: 0 12px 50px;
		.image{
			position: relative;
			.image_overlay{
				background: blue;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				opacity: 0;
				transition: .4s opacity;
        a{
          color: white;
        }
			}
			img{
				width: 100%;
				display: block;
				mix-blend-mode: luminosity;
			}
		}
    &:hover{
			.image{
				.image_overlay{
					opacity: .9;
         }
         img{
					  mix-blend-mode: normal;
				  }
			 }
	  }
  }