LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Spiral Galaxy NGC 1309 Approximately 120 million light years from Earth Home to several Cephid variable stars Member of the Eridanus galactic cloud Photograph of NGC 1309
CSS
@import url(https://fonts.googleapis.com/css?family=Orbitron);
body { margin: 2em; }
.multi-hover {
	position: relative;
	font-family: Orbitron, sans-serif;
	max-width: 500px;
	line-height: 0;
	overflow: hidden;
}
.multi-hover img {
	max-width: 100%;
}
.multi-hover span {
	position: absolute;
	width: 100%;
	height: 100%;
	line-height: 1.5;
	font-weight: 100;
	text-align: center;
	box-sizing: border-box;
	font-size: 3em;
	z-index: 2;
	transition: .3s linear;
	color: white;
	padding: 15%;
	opacity: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.multi-hover span:hover { opacity: 1; }

.multi-hover span:nth-child(odd):hover { left: 0; z-index: 3; }
.multi-hover span:nth-child(odd).hover { left: 0; z-index: 1; }
.multi-hover span:nth-child(even):hover { top: 0; z-index: 3; }
.multi-hover span:nth-child(even).hover { top: 0; z-index: 1; } 

.multi-hover span:nth-child(1) { /* right panel */
	top: 0;
	left: 90%;
	background: hsla(0,70%,50%,0.6);  
	}
	 
.multi-hover span:nth-child(2) { /* top panel */ 
	top: -90%;
	left: 0;
	background: hsla(90,70%,50%,0.6); 
	}   

.multi-hover span:nth-child(3) { /* left panel */ 
	top: 0;
	left: -90%;
	background: hsla(180,70%,50%,0.6); 
	}  
	
.multi-hover span:nth-child(4) { /* bottom panel */
	top: 90%;
	left: 0;
	background: hsla(270,70%,50%,0.6); } 
JS
function is_touch_device() {
  return !!('ontouchstart' in window) 
      || !!('onmsgesturechange' in window); 
};

$(document).ready(function() {
  if (is_touch_device()) {
    $('span').unbind('mousenter mouseleave touchend touchstart');
    $('span').bind('touchstart', function() {
      $('span').removeClass('hover');
      $(this).addClass('hover');
    });
  }
});
Host Instantly Drag and Drop Website Builder

 

Description

An explanation, and more information, on my blog.
Term
Mon, 11/27/2017 - 21:32

Related Codes

Pen ID
Pen ID
Pen ID