JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<div class="tint">
                    <img class="meetTheTeamImg leaders" alt="" src="https://www.holmescustom.com/media/wysiwyg/Bryan.jpg"/>
                    <div class="middle">
                        <div class="textName">Bryan Croft</div>
                        <p>President And CEO</p>
                    </div>
                </div>

CSS

.tint {
        position: relative;
        float: left;
        cursor: pointer;
        width: 100%;
    }

    .tint:before {
        content: "";
        display: block;
        position: absolute;
        top: 4.5%;
        bottom: 4%;
        left: 5.1%;
        right: -5%;
        background: none;
        transition: all .3s linear;
    }

    .tint:hover:before {
        background: #00cc00
    }
  .meetTheTeamImg {
    width: 100%;
    opacity: 1;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    }
    .imageContainer:hover .meetTheTeamImg {
        opacity: 0.5;
    }
        .imageContainer:hover .middle {
        opacity: 1;
    }