JSFiddle - React, Tailwind, and code Playground

HTML

<div class="views-field views-field-field-member-image">        
        <div class="field-content">
            <div class="field-more-link" >
                <div class="field-name"><a href="/team-member/darrell-smith">Darrell Smith</a></div>
                <div class="field-position">Instrument Maker</div>
                <div class="field-general-position" style="display: none;">Associates</div>
                <div class="field-project-name"><a href="google.com/tags/project">IceCube</a></div>
                  <div class="field-phone"></div>
                  <div class="field-email">dsmith@whatever.edu</div>
        </div>
            
    <div class="field-image">
        <img typeof="foaf:Image" src="http://i.imgur.com/6wGdB52.jpg" alt="Darrell Smith" ></img>
    </div>
</div>
</div>

CSS

.field-image img {
    width: 200px;
    height: 266px;
}

.field-more-link {
    display:none;
    position:absolute;
    color:white;
    z-index: 2;
    
}

JavaScript

$('.field-content').hover(
        function () {
          $('.field-image').find('img').fadeTo(1000, .3);
          $('.field-more-link').show(1);
        },
        function () {
          $('.field-more-link').hide();
          $('.field-image').find('img').fadeTo(100, 1);
        }
      );