JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dogs">
    <li class="dog">
        <img class="dog-photo" src="http://placehold.it/200x300" />
        <div class="dog-info">
             <h3 class="info-name">Dog 1</h3>
             <span class="info-title">Founder / CEO</span>
        </div>
    </li>
    <li class="dog">
        <img class="dog-photo" src="http://placehold.it/200x300" />
        <div class="dog-info">
             <h3 class="info-name">Dog 2</h3>
             <span class="info-title">Founder / CEO</span>
        </div>
    </li>
</ul>

CSS

.dogs{
    margin:0;
    list-style-type:none;
}
.dog {
    width:200px;
    height:300px;
    position:relative;
    float:left;
    margin-right:20px;
}
.dog:hover .dog-info{
    opacity:1;
}
.dog-info {
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.8);
    top:0;
    left:0;
    opacity:0;
}
.info-name,.info-title{
    position:relative;
    left:50%;
    width:100px;
    margin-left:-50px;
    text-align:center;
    display:block;
}
.info-name{top:35%;}
.info-title{top:35%;}