<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&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;
}
});
This Pen doesn't use any external CSS resources.