Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <div id="main-stage">
        <div id="grid">
        	
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-1.jpg" data-big="img/big/big-1.jpg" alt="grid image1"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-2.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-2.jpg" alt="grid image2"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-3.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-3.jpg" alt="grid image3"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-4.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-4.jpg" alt="grid image4"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-5.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-5.jpg" alt="grid image5"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-6.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-6.jpg" alt="grid image6"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-7.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-7.jpg" alt="grid image7"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-8.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-8.jpg" alt="grid image8"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-9.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-9.jpg" alt="grid image9"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-10.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-10.jpg" alt="grid image10"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-11.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-11.jpg" alt="grid image11"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-12.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-12.jpg" alt="grid image12"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-13.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-13.jpg" alt="grid image13"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-14.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-14.jpg" alt="grid image14"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-15.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-15.jpg" alt="grid image15"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-16.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-16.jpg" alt="grid image16"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-17.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-17.jpg" alt="grid image17"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-18.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-18.jpg" alt="grid image18"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-19.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-19.jpg" alt="grid image19"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-20.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-20.jpg" alt="grid image20"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-21.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-21.jpg" alt="grid image21"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-22.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-22.jpg" alt="grid image22"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-23.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-23.jpg" alt="grid image23"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-24.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-24.jpg" alt="grid image24"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-25.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-25.jpg" alt="grid image25"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-26.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-26.jpg" alt="grid image26"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-27.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-27.jpg" alt="grid image27"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-28.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-28.jpg" alt="grid image28"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-29.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-29.jpg" alt="grid image29"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-30.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-30.jpg" alt="grid image30"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-31.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-31.jpg" alt="grid image31"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-32.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-32.jpg" alt="grid image32"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-33.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-33.jpg" alt="grid image33"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-34.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-34.jpg" alt="grid image34"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-35.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-35.jpg" alt="grid image35"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-36.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-36.jpg" alt="grid image36"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-37.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-37.jpg" alt="grid image37"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-38.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-38.jpg" alt="grid image38"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-39.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-39.jpg" alt="grid image39"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-40.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-40.jpg" alt="grid image40"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-41.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-41.jpg" alt="grid image41"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-42.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-42.jpg" alt="grid image42"></div>
			<div class="image-grid buttonMode"><img src="http://pixel-salad.com/website/template6/img/small/small-43.jpg" data-big="http://pixel-salad.com/website/template6/img/big/big-43.jpg" alt="grid image43"></div>


        </div>

        
    </div>

    <div id="loading-overlay">
		<div id="canvasloader-container" class="loading-animation"></div>
	</div>
              
            
!

CSS

              
                /* GENERAL STYLE ----------- */
html, body{
	height: 100%;
	width: 100%;
	overflow-x: hidden;
}
.buttonMode { cursor: pointer; }

#main-stage{
	position: relative;
	float: left;
	width: 100%;
	height:100%;
}
#loading-overlay{
	width: 100%;
	height:100%;
	position: fixed;
	float: left;
	background-color: #000;
	opacity: 0;
	display: none;
}
.loading-animation {
	position:absolute;
	top:50%;
	left:50%;
}

/* GRID ----------- */
#grid{
	background-color: #fff;
	position: absolute;
	max-width: 100%;
	margin: 0;
	padding: 0;
	height:auto;
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
	align-content: stretch;
	padding: 5px;
}
.image-grid, #container-zoom{
	position: relative;
	flex: 1 1 auto;
	margin:5px;
}
.image-grid{
	min-width: 100px;
	min-height: 100px;
	background-color: #ccc;
	max-width: 100%;
	max-height: 300px;
	transition: opacity .15s ease-in-out;
	-moz-transition: opacity .15s ease-in-out;
	-webkit-transition: opacity .15s ease-in-out;

	background-size: cover;
}
.image-grid:hover{
	opacity:0.75;
}
.image-grid img, #zoom img{
	display: block;
	width: 100%;
	height: 100%;
}
.image-grid img{
	position: relative;
	object-fit: cover;
}
.compat-object-fit {
	background-repeat: no-repeat;
	background-position: center center;
}


/* ZOOM ----------- */
#container-zoom{
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
	height: 0;
	background-color: #313131;
	display: none;
}
#zoom{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
}
#bubble-tail{
	position: absolute;
	margin-top: 20px;

	width: 0; 
	height: 0; 
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid #313131;
}
#overlay-close{
	z-index: 10;
	background-color: #313131;
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	-ms-transform: translate(-50%,-50%); /* IE 9 */
	-webkit-transform: translate(-50%,-50%); /* Safari */
	transform: translate(-50%,-50%);
	transition: opacity .15s ease-in-out;
	-moz-transition: opacity .15s ease-in-out;
	-webkit-transition: opacity .15s ease-in-out
}
#overlay-close:hover{
	opacity: 0.8;
}
.overlay-close-x{
	font-family: Arial, Helvetica, sans-serif;
	position: relative;
	width:100%;
	color: white;
	font-size: 4em;
	text-align: center;

	top: 50%;
	-ms-transform: translateY(-50%); /* IE 9 */
	-webkit-transform: translateY(-50%); /* Safari */
	transform: translateY(-50%);
}
              
            
!

JS

              
                $(function(){

	var numItemsRow;
	var newNumItemsRow;
	var changeNewItemRow;
	var WichRowToAttachZoom;
	var speedOpenZoom = 500;
	var speedScroll = 500;
	var index;
	var modifIndex;
	var top;

	//ATTACH CLICK EVENT ON ALL THE IMAGES
	var tabImageGrid = document.getElementsByClassName("image-grid")
	for (var i=0 ; i<tabImageGrid.length ; i++){
		tabImageGrid[i].addEventListener("click",clickImageGrid);
	}

	function clickImageGrid(){
		//IF ZOOM ALREADY PRESENT, CLOSE IT
		if($("#container-zoom").length > 0){
			closeZoom(this);
			return;
		}

		//GET INDEX OF IMAGE CLICKED
		index = defineIndex($(this));

		//GET LINK TO BIG IMAGE
		var linkImageBig = this.getElementsByTagName('img')[0].getAttribute("data-big")
		numItemsRow = NumberRow($(".image-grid").width());

		var newTarget = findFirstElementRow();

		//ATTACH AND LOAD THE ZOOM
		$("<div id='container-zoom'><div id='zoom'><div id='overlay-close' class='buttonMode'><div class='overlay-close-x'>X</div></div></div><div id='bubble-tail'></div></div>").insertBefore(newTarget);
		LoadNewImage( document.getElementById("zoom"), linkImageBig);
		document.getElementById("overlay-close").addEventListener("click", closeZoom);
	}



	function LoadNewImage(target, url) {
	   	//SHOW LOADING SCREEN
	   	$("#loading-overlay").css("display","block");
	   	$('#loading-overlay').animate({ opacity: 0.5 },{ duration: 200, easing: 'easeInOutQuint', 
			complete: function () {
				//LOAD NEW IMAGE
			    var newImage = new Image();
			    newImage.src = url;
			    newImage.onload = function() {
			    	var zoomMaxHeight = newImage.height;
			    	var zoomMaxWidth = newImage.width;
			        // image is loaded into browser memory, so will display instantly
			        $(target).css({"background-image": 'url(' + url + ')', "max-height": "100%", "max-width": "100%"});
			        openZoom(zoomMaxHeight);
			        //REMOVE OVERLAY LOADING
			        $('#loading-overlay').animate({ opacity: 0 },{ duration: 200, easing: 'easeInOutQuint',
			        	complete:function(){
			        		$(this).css("display", "none");
			        	}
			        });
			    }
			}
		});
	}

	function defineIndex(target){
		var index = target.index();
		return index;
	}	

	function defineTarget(Index, NumItemsRow){
		modifIndex = Index;
		var posLeftImage = $(".image-grid").eq(modifIndex).position().left;
		if(posLeftImage > 5){
			//IF IMAGE IS NOT FIRST IN ROW, GET PREVIOUS IMAGE
			modifIndex--
			defineTarget(modifIndex, NumItemsRow);
		}else{
			//IF IMAGE IS FIRST IN ROW, RETURN ITS INDEX
			return modifIndex;
		}
	}

	function NumberRow(Width){
		var widthElement = Width;
		var widthContainer = $("#grid").width();
		var numberItemsRow = Math.round(widthContainer / widthElement);
		return numberItemsRow;
	}

	function openZoom(Height){
		//POSITION TAIL BUBBLE
		positionBubble();

		$("#container-zoom").css("display","block");
		$("#container-zoom").animate({ "height" : Height-30, "padding": "20px", "margin": "5px" },{duration: speedOpenZoom, easing: 'easeInOutQuint',});

		var heightScrollTarget = $("#container-zoom").position().top -5;
		scrollToTarget(heightScrollTarget);
	}

	function closeZoom(newTarget){
		document.getElementById("overlay-close").removeEventListener("click", closeZoom);
		$("#container-zoom").animate({ "height": 0, "padding-top": 0, "padding-bottom": 0, "margin-top": 0,"margin-bottom": 0},{duration: speedOpenZoom, easing: 'easeInOutQuint',
			complete:function(){
				$("#container-zoom").remove();
				$(newTarget).trigger('click');
			}
		});
	}

	function positionBubble(){
		var posBubble = $(".image-grid").eq(index).position().left;
		var sizeImage = $(".image-grid").eq(index).width();
		var middleBubble = (sizeImage/2)-($("#bubble-tail").width()/2)

		$("#bubble-tail").css("left", posBubble);
		$("#bubble-tail").css("margin-left", middleBubble);
	}

	function findFirstElementRow(){
		//DEFINE WHERE THE ROW BEGINS AND TARGET IT
		defineTarget(index, numItemsRow);
		var target = $(".image-grid").eq(modifIndex);
		return target;
	}

	function resize(){
		//IF ZOOM PRESENT
		if($("#container-zoom").length > 0){
			positionBubble();

			var newTarget = findFirstElementRow();

			//MOVE THE ZOOM TO THE BEGINNING OF THE ROW OF THE CURRENT ITEM
			$("#container-zoom").insertBefore(newTarget);
		}
	}


	function scrollToTarget(target){
		$("body").animate({ "scrollTop": target },{ duration: speedScroll, easing: 'easeInOutQuint', });
	}

	window.onresize=resize;

	//LOADING ICON
	var cl = new CanvasLoader('canvasloader-container');
	cl.setColor('#ffffff'); // default is '#000000'
	cl.setShape('spiral'); // default is 'oval'
	cl.setDiameter(47); // default is 40
	cl.setDensity(121); // default is 40
	cl.setRange(1); // default is 1.3
	cl.setSpeed(5); // default is 2
	cl.setFPS(60); // default is 24
	cl.show(); // Hidden by default

	//IE FALLBACK FOR OBJECT FIT
	if ( ! Modernizr.objectfit ) {
	  $('.image-grid').each(function () {
	  	console.log("ok");
	    var $container = $(this),
	        imgUrl = $container.find('img').prop('src');
	    if (imgUrl) {
	    	$(".image-grid").children("img").css("opacity",0);
	    	$container
	        	.css({'backgroundImage': 'url(' + imgUrl + ')'})
	        	.addClass('compat-object-fit');
	    }  
	  });
	}


});
              
            
!
999px

Console