JSFiddle - React, Tailwind, and code Playground

by alexdickson

HTML

<div class="workitem branding">
    <div class="workitem_photo"><img src="http://www.gravatar.com/avatar/9bf9840ff095030fb63d93541a6b5ac7?s=32&d=identicon&r=PG" 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').each(function() {
        var projectDetails = $(this).find('> .workitem_projectdetails');

        $(this).find('.workitem_photo > img').hover(function() {
            $(this).fadeTo(500, .8);
            projectDetails.show('500');
        }, function() {
            $(this).fadeTo(500, 1);
            projectDetails.hide('500');
        });
    });
});