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