Thumbnail... Copy source to another item

by Craig Martin

HTML

<div class="header">

<div class="thumb-group">
  <img class="thumb" src="http://lorempixel.com/100/100/abstract/7" />
  <img class="thumb" src="http://lorempixel.com/100/100/abstract/5" />
  <img class="thumb" src="http://lorempixel.com/100/100/abstract/2" />
  <img class="thumb" src="http://lorempixel.com/100/100/abstract/1" />
</div></div>

CSS

.thumb { 
  width: 100px;
  height: 100px;
  float: left;
 }
.thumb-group {
  width: 440px;
 }
.header {
  width: 440px;
  height: 500px;
 }

JavaScript

$(function(){
  $('.thumb').hover(function(){
      $(this).fadeIn();
    $('.header').css("backgroundImage", "url(" + $(this).attr("src") + ")");
  });
});