<h1>IOS 10 style image shadow<br /><span>With CSS</span></h1>

<div class="image-shadow js-tilt-container" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/385126/600.jpg)">

</div>
<div class="light"></div>


.image-shadow:after {
  transform: scale(0.95) translateY(36px) translateZ(-30px);
  filter: blur(20px);
  opacity: 0.9;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: inherit; // Neat huh! :)
  background-size: cover;
  z-index: -1;
  transition: filter .3s ease;
}

.image-shadow {
  margin: 20px auto;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  display: block;
  position: relative;
  background-size: cover;
}


// Just for show
.light {
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 60%);
  width: 600px;
  height: 600px;
  background-blend-mode: lighten;
  position: fixed;
  pointer-events: none;
}




// ===========================



h1 {

  max-width: 400px;
  width: 100%;
  font-size: 24px;
  text-align: center;
  margin: 50px auto 30px;
  span {
    font-size: 16px;
    color: #666;
    font-weight: 400;
  }
}
.js-tilt-container {
  transition: transform .1s ease;
  transform: rotateX(0) rotateY(0);
	transform-style: preserve-3d;
}
.leave {
  transform: rotateX(0) rotateY(0) !important;
	transition-timing-function: cubic-bezier(0.42, 0, 0, 1)!important;
	transition-duration: 1.5s;
}
View Compiled
// Tilt effect

$(document).on('mousemove', function(e){
    $('.light').css({
       left:  e.pageX - 300,
       top:   e.pageY - 300
    });
});

var el = $('.js-tilt-container');

el.on('mousemove', function(e){
	const {left, top} = $(this).offset();
	const cursPosX = e.pageX - left;
	const cursPosY = e.pageY - top;
	const cursFromCenterX = $(this).width() / 2 - cursPosX;
	const cursFromCenterY = $(this).height() / 2 - cursPosY;
	

	$(this).css('transform','perspective(500px) rotateX('+ (cursFromCenterY / 40) +'deg) rotateY('+ -(cursFromCenterX / 40) +'deg) translateZ(10px)');
  
  const invertedX = Math.sign(cursFromCenterX) > 0 ? -Math.abs( cursFromCenterX ) : Math.abs( cursFromCenterX );
  
  //Parallax transform on image
  $(this).find('.js-perspective-neg').css('transform','translateY('+ ( cursFromCenterY / 10) +'px) translateX('+ -(invertedX  / 10) +'px) scale(1.15)');

	$(this).removeClass('leave');
});

el.on('mouseleave', function(){
	$(this).addClass('leave');
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js