<div id="nkh-grid-container">
        <div class="nkh-grid-item" data-grid-href=
        "/en/Nikon-Products/Product/Digital-SLR-Cameras/1526/Nikon-Df.html"
        data-grid-image-prefix="df" data-grid-item-id="Nikon Df" id=
        "nkh-grid-item-0">
            <div class="nkh-grid-item-media"><img class=
            "nkh-grid-default-image" src=
            "//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/df.jpg"></div>
        </div>

        <div class="nkh-grid-item" data-grid-href=
        "/en/Nikon-Products/Product/Nikon1/27695/Nikon-1-V3.html"
        data-grid-image-prefix="nikon-v3ft1" data-grid-item-id=
        "Nikon V3 + FT-1" id="nkh-grid-item-1">
            <div class="nkh-grid-item-media"><img class=
            "nkh-grid-default-image" src=
            "//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/nikon-v3ft1.jpg"></div>
        </div>

        <div class="nkh-grid-item" data-grid-href=
        "/en/Nikon-Products/Photography-Accessories/Videos-And-DVDs.page#!/tag:7WA:VIDEO"
        data-grid-image-prefix="nikon-books" data-grid-item-id="Nikon Books"
        id="nkh-grid-item-2">
            <div class="nkh-grid-item-media"><img class=
            "nkh-grid-default-image" src=
            "//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/nikon-books2.jpg"></div>
        </div>

        <div class="nkh-grid-item" data-grid-href=
        "/en/Nikon-Store/Logo-Items.page?cid=web-0514-logo-items-hp"
        data-grid-image-prefix="nikon-merchandise" data-grid-item-id=
        "Nikon Merchandise" id="nkh-grid-item-3">
            <div class="nkh-grid-item-media"><img class=
            "nkh-grid-default-image" src=
            "//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/nikon-merchandise.jpg"></div>
        </div>

        <div class="nkh-grid-item nkh-new-win" data-grid-href=
        "http://cinema.nikonusa.com/" data-grid-image-prefix="nikon-cinema"
        data-grid-item-id="Nikon Cinema" id="nkh-grid-item-4">
            <div class="nkh-grid-item-media"><img class=
            "nkh-grid-default-image" src=
            "//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/nikon-cinema.jpg"></div>
        </div>

        <div class="nkh-grid-item nkh-new-win" data-grid-href=
        "https://www.youtube.com/watch?v=-aqt_cTjZd8&amp;list=UUjmEbz8wosl__h2opGT5k2w"
        data-grid-image-prefix="behind-the-scenes" data-grid-item-id=
        "Behind the Scenes" id="nkh-grid-item-5">
            <div class="nkh-grid-item-media"><img class=
            "nkh-grid-default-image" src=
            "//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/behind-the-scenes.jpg"></div>
        </div>
    </div>
#nkh-grid-container { height: 670px; margin: 0 auto; position: relative; width: 900px; }
.nkh-grid-item { background-color: #fff; border: solid 1px #e4e4e4 !important; cursor: pointer; overflow: hidden; position: absolute; }
.nkh-grid-item-media { position: relative; height: 100%; width: 100%; }
.nkh-grid-item-media img { position: absolute; top: 0; left: 0; }

#nkh-grid-item-0 { height: 208px; left: 0; top: 0; width: 438px; }
#nkh-grid-item-1 { height: 208px; right: 0; top: 0; width: 438px; }
#nkh-grid-item-1 .nkh-grid-item-img-replacement { top: 0; left: auto; right: 0; }
#nkh-grid-item-2 { bottom:0; height:438px; left:0; width:208px; }
#nkh-grid-item-2 .nkh-grid-item-img-replacement { bottom: 0; top: auto; left: 0; right: auto; }
#nkh-grid-item-3 { height: 208px; top: 230px; right: 0; width: 668px; }
#nkh-grid-item-3 .nkh-grid-item-img-replacement { bottom: 50%; top: 50%; left: auto; margin-top: -334px; right: 0; }
#nkh-grid-item-4 { bottom: 0; height: 208px; left: 230px; width: 438px; }
#nkh-grid-item-4 .nkh-grid-item-img-replacement { bottom: 0; top: auto; left: 50%; margin-left: -449px; right: 50%; }
#nkh-grid-item-5 { bottom: 0; height: 208px; right: 0; width: 208px; }
#nkh-grid-item-5 .nkh-grid-item-img-replacement { bottom: 0; top: auto; left: auto; right: 0; }

.nkh-grid-item-img-replacement { display: none; }

var hideItems = 0;
function hideItemF() {
	$('.nkh-grid-item').each(function(){
		$('.nkh-grid-item-img-replacement', this).fadeOut(250, function(){
			$(this).remove();
		});
	});
}

$('.nkh-grid-item').hover(
  function(){
		var imgSetId = $(this).attr('data-grid-image-prefix');

		if(hideItems) {
			clearTimeout(hideItems);
		}

		$('.nkh-grid-item').each(function(step){
			var par = $(this);

			if(step == 0) {
				bgPos = 'top left';
			} else if(step == 1) {
				bgPos = 'top right';
			} else if(step == 2) {
				bgPos = 'bottom left';
			} else if(step == 3) {
				bgPos = 'center right';
			} else if(step == 4) {
				bgPos = 'bottom center';
			} else if(step == 5) {
				bgPos = 'bottom right';
			}

			$('<img/>').addClass('nkh-grid-item-img-replacement').attr({ src: '//nikonusa.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/' + imgSetId + '-full.jpg'}).appendTo($('.nkh-grid-item-media', $(par))).delay(step * 100).fadeIn(250);

		});

	},
	function(){
		hideItems = setTimeout(hideItemF, 350);
	});

$('.nkh-grid-item').click(function(){
	var gridItemId = $(this).attr('data-grid-item-id');
	var gridHref = $(this).attr('data-grid-href');
	s.linkTrackVars = 'prop19,eVar32,events';
	s.linkTrackEvents = s.events = 'event47';
	s.prop19 = s.eVar32 = 'mid-page-banner>' + gridItemId;
	s.tl(this, 'o', 'Home Page – Mid-Page Banner');
	s.linkTrackEvents = s.linkTrackVars = 'None';
	if($(this).hasClass('nkh-new-win')) {
		window.open(gridHref);
	} else {
		window.location = gridHref;
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js