<p>Check the Details for an improved version</p>
<div class="image"></div>

body {
  background: #333;
}

.image {
  margin: 20px auto;
  background-color: #fff;
  background-image: url('http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0515.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  width: 400px;
  height: 533px;
  padding: 10px;
}

p {
  color: #fff;
  font-family: segoe ui, helvetica neue, helvetica, arial, sans-serif;
  font-weight: 200;
}

var centerImage = 3,
  	imageUrls = ['http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0518.jpg', 
                      'http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0517.jpg', 
                      'http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0516.jpg', 
                      'http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0515.jpg', 
                      'http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0519.jpg', 
                      'http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0520.jpg', 
                      'http://www.alexandery.net/wp-content/uploads/2013/05/IMG_0521.jpg'],
    preLoad = new Array();

$(function(){
  for(var rowCount = 0; rowCount < imageUrls.length; rowCount++){
   $('.image').append('<div class="imageRow" row-num="' + rowCount + '"></div>'); // Appending row with row-number
   preLoad[rowCount] = new Image();
   preLoad[rowCount].src = imageUrls[rowCount];
  }
  $('.image img').css('display', 'none'); // Hiding Pre-loaded Images
  $('.image .imageRow').css({
    float: 'left',
    height: '100%',
    width: 100 / rowCount + '%',
  });
  
  $('.image .imageRow').mouseover(function(){
     $('.image').css('background-image', 'url(' + preLoad[$(this).attr('row-num')].src + ')');
  });
  
  $('.image').mouseout(function(){
     $(this).css('background-image', 'url(' + preLoad[centerImage].src + ')'); // Return to center
  });
});