JSFiddle - React, Tailwind, and code Playground
HTML
<div id="links">
<a href="example.htm" class="large magenta awesome" data-content="cheeseburger">Cheeseburger »</a>
<a href="example.htm" class="large blue awesome" data-content="tacos">Tacos »</a>
<a href="example.htm" class="large red awesome" data-content="salads">Salads »</a>
<a href="example.htm" class="large orange awesome" data-content="bread-sticks">Bread Sticks »</a>
<a href="example.htm" class="large yellow awesome" data-content="dessert">Dessert »</a>
</div>
<div id="images">
<img src="http://media.smashingmagazine.com/wp-content/uploads/images/brand-ux/cb.jpg" id="cheeseburger">
<img src="http://adventuresoflittlemiss.files.wordpress.com/2012/07/tacos.jpg" id="tacos">
<img src="http://www.growingappetite.com/wp-content/uploads/2011/05/chicken-salad1.jpg" id="salads">
<img src="http://afflictor.com/wp-content/uploads/2010/10/breadsticks1.jpg" id="bread-sticks">
<img src="http://1.bp.blogspot.com/-IaURSrV70LI/T4YzPubl9EI/AAAAAAAAGSg/AEdd-eLuJUk/s1600/Cooking+Weekly.jpg" id="dessert">
</div>
CSS
#images img {
width: 320px;
height: auto;
display: none;
}
a {
display: inline-block;
margin-right: 1em;
}
JavaScript
$("div#links > a").hover(
function(){
var ID = $(this).data("content");
$("div#images").children("img#" + ID).stop(true, true).fadeIn("slow");
},
function() {
var ID = $(this).data("content");
$("div#images").children("img#" + ID).hide();
}
);