JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div class="item">
   <div class="dark-overlay"></div>
   <img src="my image.jpg" />
</div>

<div class="item">
   <div class="dark-overlay"></div>
   <img src="my image.jpg" />
</div>

CSS

.item {
position:relative;
width:680px;
height:140px;
}
.dark-overlay {
position:absolute;
width:680px;
height:140px;
background: #000;
display:none;
}

JavaScript

$(function() {
   $(".item").hover(function() {
       $(this).find(".dark-overlay").animate({ opacity: 'toggle' });
   });
});