IMAGE INVERSE WITH THE CURSOR
TILT IMAGE
.box { position: relative; width: 300px; height: 300px; } .box-contents { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(https://source.unsplash.com/300x300/?cat) 50% 50% / cover no-repeat; box-shadow: 0 0 50px rgba(0, 0, 0, .3); transition: .5s ease; } .hover-point { position: absolute; z-index: 2; width: calc(100% / 3); height: calc(100% / 3); } .hover-point:nth-child(1) { top: 0; left: 0; } .hover-point:nth-child(2) { top: 0; left: calc(100% / 3); } .hover-point:nth-child(3) { top: 0; right: 0; } .hover-point:nth-child(4) { top: calc(100% / 3); left: 0; } .hover-point:nth-child(5) { top: calc(100% / 3); right: 0; } .hover-point:nth-child(6) { bottom: 0; left: 0; } .hover-point:nth-child(7) { bottom: 0; left: calc(100% / 3); } .hover-point:nth-child(8) { bottom: 0; right: 0; } .hover-point:nth-child(1):hover ~ .box-contents { box-shadow: 15px 15px 50px rgba(0, 0, 0, .3); transform-origin: right top; transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(2deg); } .hover-point:nth-child(2):hover ~ .box-contents { box-shadow: 0 15px 50px rgba(0, 0, 0, .3); transform-origin: center top; transform: perspective(1000px) rotateX(10deg); } .hover-point:nth-child(3):hover ~ .box-contents { box-shadow: -15px 15px 50px rgba(0, 0, 0, .3); transform-origin: left top; transform: perspective(1000px) rotateX(10deg) rotateY(10deg) rotateZ(-2deg); } .hover-point:nth-child(4):hover ~ .box-contents { box-shadow: 15px 5px 50px rgba(0, 0, 0, .3); transform-origin: left center; transform: perspective(1000px) rotateY(-10deg); } .hover-point:nth-child(5):hover ~ .box-contents { box-shadow: -15px 5px 50px rgba(0, 0, 0, .3); transform-origin: right center; transform: perspective(1000px) rotateY(10deg); } .hover-point:nth-child(6):hover ~ .box-contents { box-shadow: 15px -15px 50px rgba(0, 0, 0, .3); transform-origin: right bottom; transform: perspective(1000px) rotateX(-10deg) rotateY(-10deg) rotateZ(-2deg); } .hover-point:nth-child(7):hover ~ .box-contents { box-shadow: 0 -15px 50px rgba(0, 0, 0, .3); transform-origin: center bottom; transform: perspective(1000px) rotateX(-10deg); } .hover-point:nth-child(8):hover ~ .box-contents { box-shadow: -15px -15px 50px rgba(0, 0, 0, .3); transform-origin: left bottom; transform: perspective(1000px) rotateX(-10deg) rotateY(10deg) rotateZ(2deg); } /* demo style */ body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; text-align: center; } .demo { padding: 2em; } input[type="checkbox"]:checked ~ .box .hover-point { counter-increment: point; } input[type="checkbox"]:checked ~ .box .hover-point::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: counter(point); color: #fff; font-size: 1.5rem; } input[type="checkbox"]:checked ~ .box .hover-point:nth-child(1) { background: rgba(46, 204, 113, .5); } input[type="checkbox"]:checked ~ .box .hover-point:nth-child(2) { background: rgba(52, 152, 219, .5); } input[type="checkbox"]:checked ~ .box .hover-point:nth-child(3) { background: rgba(155, 89, 182, .5); } input[type="checkbox"]:checked ~ .box .hover-point:nth-child(4) { background: rgba(241, 196, 15, .5); } input[type="checkbox"]:checked ~ .box .hover-point:nth-child(5) { background: rgba(230, 126, 34, .5); } input[type="checkbox"]:checked ~ .box .hover-point:nth-child(6) { background: rgba(231, 76, 60, .5); } input[type="checkbox"]:checked ~ .box .hover-point:nth-child(7) { background: rgba(26, 188, 156, .5); } input[type="checkbox"]:checked ~ .box .hover-point:nth-child(8) { background: rgba(149, 165, 166, .5); } .box { margin-top: 2em; }