JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<div class="portfolio">
    <a href="#"><img src="http://placehold.it/181x180" alt="work_1" width="181" height="180" /></a>
    <div class="portfolio-overlay" style="display:none;">
        <p class="client-name">Encore Azalea</p>
        <div class="white-line"></div>
        <p class="services">website redesign +<br />mobile site launch</p>
    </div>
</div>
<div class="portfolio">
    <a href="#"><img src="http://placehold.it/181x180" alt="work_1" width="181" height="180" /></a>
    <div class="portfolio-overlay" style="display:none;">
        <p class="client-name">Encore Azalea</p>
        <div class="white-line"></div>
        <p class="services">website redesign +<br />mobile site launch</p>
    </div>
</div>

CSS

.portfolio {
    position: relative;
    display: inline-block;
    width: 185;
    height: 185;
}
.portfolio .portfolio-overlay {
    position: absolute;
    background: rgba(30,30,30,0.5);
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 181px;
    height: 90px;
}

JavaScript

$('.portfolio a:has(>img)').hover(function(e){
  var $overlay = $(this).siblings('.portfolio-overlay');
  $overlay.fadeIn('slow');
},function(e){
  var $overlay = $(this).siblings('.portfolio-overlay');
  $overlay.fadeOut('slow');
});