JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
            <img src="http://d13yacurqjgara.cloudfront.net/users/38681/screenshots/1355844/lightbulb.png" />
            <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
        </a>
    </li>
    <li>
       <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
            <img src="http://d13yacurqjgara.cloudfront.net/users/38681/screenshots/1355844/lightbulb.png" />
            <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
        </a>
    </li>
     <li>
       <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
            <img src="http://d13yacurqjgara.cloudfront.net/users/38681/screenshots/1355844/lightbulb.png" />
            <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
        </a>
    </li>
</ul>

CSS

.da-thumbs li {
    float: left;
    margin: 5px;
    background: #fff;
    padding: 8px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative;
}
.da-thumbs li a {
    overflow: hidden;
}
.da-thumbs li a div {
    position: absolute;
    background: rgba(75,75,75,0.7);
    width: 100%;
    height: 100%;
}

JavaScript

/**
 * jquery.hoverdir.js v1.1.1
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2012, Codrops
 * http://www.codrops.com
 */
;( function( $, window, undefined ) {
	
	'use strict';

	$.HoverDir = function( options, element ) {
		
		this.$el = $( element );
		this._init( options );

	};

	// the options
	$.HoverDir.defaults = {
		speed : 300,
		easing : 'ease',
		hoverDelay : 0,
		inverse : false,
		hoverElem : 'div'
	};

	$.HoverDir.prototype = {

		_init : function( options ) {
			
			// options
			this.options = $.extend( true, {}, $.HoverDir.defaults, options );
			// transition properties
			this.transitionProp = 'all ' + this.options.speed + 'ms ' + this.options.easing;
			// support for CSS transitions
			this.support = Modernizr.csstransitions;
			// load the events
			this._loadEvents();

		},
		_loadEvents : function() {

			var self = this;
			
			this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
				
				var $el = $( this ),
					$hoverElem = $el.find( self.options.hoverElem ),
					direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
					styleCSS = self._getStyle( direction );
				
				if( event.type === 'mouseenter' ) {
					
					$hoverElem.hide().css( styleCSS.from );
					clearTimeout( self.tmhover );

					self.tmhover = setTimeout( function() {
						
						$hoverElem.show( 0, function() {
							
							var $el = $( this );
							if( self.support ) {
								$el.css( 'transition', self.transitionProp );
							}
							self._applyAnimation( $el, styleCSS.to, self.options.speed );

						} );
						
					
					}, self.options.hoverDelay );
					
				}
				else {
				
					if( self.support ) {
						$hoverElem.css( 'transition', self.transitionProp );
					}
					clearTimeout( self.tmhover );
					self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );
					
				}
					
			} );

		},
		// credits :...