JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<section id="recent-work">
    <div class="portfolio">
        <a href="#"><img width="181" height="180" alt="work_1" src="http://placehold.it/180/08f" /></a>
        <div style="display: none;" class="portfolio-overlay">
            <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 width="181" height="180" alt="work_1" src="http://placehold.it/180/f80" /></a>
        <div style="display: none;" class="portfolio-overlay">
            <p class="client-name">Encore Azalea</p>
            <div class="white-line"></div>
            <p class="services">website redesign +<br />mobile site launch</p>
        </div>
    </div>
</section>

CSS

/* 	Optera Creative Website
	Design by Optera Creative
	Development by Rouviere Media
	http://rouviere.com
	Started 03 Jan 2013
	Updated: 20130129 */


/* @group Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body 			{ line-height: 1; }
ol, ul 			{ list-style: none; }
blockquote, q 	{ quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

del { text-decoration: line-through; }

table { border-collapse: collapse; border-spacing: 0; }

/* @end */
 
/* @group Basic styling */

html { background: url(../photos/debut_light.png) repeat; }

body { 
	color: #9092B3; 
 	background: url(../photos/bg_body-homepage.png) repeat-x left top;
 	font-family: 'Raleway', sans-serif; line-height: 1.2em;
 }
 
body#inside { background: url(../photos/bg_body-inside.png) repeat-x left top; } 

#wrap		{ width: 960px; margin: 0 auto; }
#header		{ width: 960px; height: 150px; margin: 0 auto; position: relative;}

h1 			{ font-size: 2em; color: #9092B3; }

h1#logo a:link { 
	background: url(../photos/logo_optera-creative.png) no-repeat left top; 
	width: 185px;
	height: 120px;
	display: block;
	text-indent: -9999px;
	float: left;
	margin-top: 20px;
	}

span#mini-nav { float: left; clear: left; }	
span#mini-nav a:link,
span#mini-nav a:visited { color:...

JavaScript

$(document).ready(function(){
    $('.portfolio a:has(>img)').on('mouseover',function(e){
        var $overlay = $(this).siblings('.portfolio-overlay:hidden');
      $overlay.fadeIn('slow');
    });
    $('.portfolio .portfolio-overlay').on('mouseout',function(){
        var $overlay = $(this).filter(':visible');
        $overlay.fadeOut('slow');
    });
    $('#recent-work').on('mouseover',function(e){
        $('.portfolio-overlay:visible',this).fadeout('slow');
    });
});