JSFiddle - React, Tailwind, and code Playground

HTML

<div class="workitem branding">
   <div class="workitem_photo"><img src="http://patrickorr.ca/wp-content/themes/po/images/workitem/branding-1000ikc.gif" alt="1000 Islands Kayaking" /></div>
   <div class="workitem_title">1000 Islands Kayaking Identity</div>
   <div class="workitem_description">Brand development for a Kayak tour operator.</div>
   <a class="workitem_projectdetails" href="#" style="display:none;">View Project Details</a>
</div>

JavaScript

$(document).ready(function() {
    $('.workitem_photo > img').each(function() {
        $(this).hover(function() {
            $(this).stop().animate({ opacity: 0.8 }, 500);
            $(this).parent().parent().find('.workitem_projectdetails').show('500')
        },
       function() {
           $(this).stop().animate({ opacity: 1.0 }, 500);
           $(this).parent().parent().find('.workitem_projectdetails').hide('500')
       });

    });
});