JSFiddle - React, Tailwind, and code Playground

by murgiaMarco

HTML

<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>

SCSS

.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;
  background-size: cover;
  z-index: -1;
  transition: filter 0.3s ease;
}

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

.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 0.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;
}

JavaScript

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