JSFiddle - React, Tailwind, and code Playground

HTML

<div id="image-wrapper" >
    <ul id="team-members">
        <li class="tile-wrapper fade">
            <div class="tile">
                <img src="http://placehold.it/158x210"/>
                <h3 class="bio bio-header" style="display:none;">Header</h3>
                <p class="bio bio-footer" style="display:none;">Information</p>
            </div>
        </li>
    </ul>
</div>

CSS

ul {
    list-style-type:none;
}

.bio {
    padding:15px;
}

.bio-header {
    margin-top:-150px;
}

JavaScript

$(document).ready(function() {
    $('.fade').mouseenter(function(ev) {
        $(this).fadeTo(150, 0.5);
        $(this).find('img').siblings().fadeIn(150);
    }).mouseleave(function() {
        $(this).fadeTo(150, 1);
        $(this).find('img').siblings().fadeOut(150);
    });
});