JSFiddle - React, Tailwind, and code Playground
HTML
<div id="thumbsContainer">
<div class="imageHolder">
<img src="http://www.gravatar.com/avatar/1a6adef2df4eadd5f83e406eff82c964?s=50&d=identicon&r=PG" />
</div>
<div class="imageHolder">
<img src="http://www.gravatar.com/avatar/1a6adef2df4eadd5f83e406eff82c964?s=50&d=identicon&r=PG" />
</div>
<div class="imageHolder">
<img src="http://www.gravatar.com/avatar/1a6adef2df4eadd5f83e406eff82c964?s=50&d=identicon&r=PG" />
</div>
</div>
CSS
#thumbsContainer {
background:#900 url('http://www.dvd-ppt-slideshow.com/blog/wp-content/uploads/2009/12/free-christmas-powerpoint-background-red-2.jpg');
padding:20px;
overflow:auto;
}
.imageHolder {
background:#eee;
float:left;
margin:5px;
width:50px;
height:50px;
padding:0px;
border:1px solid #666;
}
JavaScript
$('#thumbsContainer').children('.imageHolder').hover(function() { $(this).siblings().children('img').stop().animate({'opacity':'0.5'}); },
function() { $(this).siblings().children('img').stop().animate({'opacity':'1'}); });