A Pen by Dudley Storey.

Hover-Effect-on-Images-From-Different-Directions-Using-Pure-CSS.markdown

Hover Effect on Images From Different Directions Using Pure CSS

An explanation, and more information, on my blog.

A Pen by Dudley Storey on CodePen.

License.

index.html

<div class=multi-hover>
<span>Spiral Galaxy NGC 1309</span>
<span>Approximately 120 million light years from Earth</span>
<span>Home to several Cephid variable stars</span>
<span>Member of the Eridanus galactic cloud</span>
<img src="//demosthenes.info/assets/images/thumbnails/ngc-1309.jpg" alt="Photograph of NGC 1309">
</div>

script.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');
    });
  }
});

style.css

@import url(http://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); }