JSFiddle - React, Tailwind, and code Playground

by jondlm

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<div id="container">
    <div id="one" class="shaded" title="This is what you do with this part of the page"></div>
    <div id="two" class="shaded" title="Two"></div>
    <div id="three" class="shaded" title="Neil Is Cool"></div>
</div>

CSS

.shaded 
{ 
    /* border:1px solid black; */
    opacity:0;
    background-color:black;
}
#container 
{ 
    width:380px;
    height:214px;
    background-image:url('http://cdn0.mos.techradar.futurecdn.net///art/software/Windows/Windows%208%20RTM/windows8rtm-380-75.jpg');
}
#one { width:190px ; height:107px ; float:left; }
#two { width:190px ; height:107px ; float:left; }
#three { width:100% ; height:107px ; float:left; }

JavaScript

$(document).ready(function() {
    $(".shaded").tooltip();
    $(".shaded").mouseover(function() {
        $(this).siblings("div").fadeTo(0, .5);
    });
    $(".shaded").mouseout(function() {
        $(this).siblings("div").fadeTo(0, 0);
    });
});