JSFiddle - React, Tailwind, and code Playground

css to make a hover element that leans towards mouse

by Travis Almand

HTML

<div class='rise-container square'>
    <div class='rise-hover rise-topLeft'></div>
    <div class='rise-hover rise-top'></div>
    <div class='rise-hover rise-topRight'></div>
    <div class='rise-hover rise-left'></div>
    <div class='rise-hover rise-center'></div>
    <div class='rise-hover rise-right'></div>
    <div class='rise-hover rise-bottomLeft'></div>
    <div class='rise-hover rise-bottom'></div>
    <div class='rise-hover rise-bottomRight'></div>
    <div class='rise-target'>
        <p>This text cannot be interacted with. Here's a <a href='#'>link</a> to try.</p>
    </div>
</div>

CSS

html,body {
    height: 100%;
    width: 100%:
}
.rise-container {
    margin: 20px auto;
    perspective: 100px;
    position: relative;
}
.rise-hover {
    height: 33%;
    position: absolute;
    width: 33%;
    z-index: 1;
}
.rise-hover.rise-topLeft {
    left: 0;
    top: 0;
}
.rise-hover.rise-topLeft:hover ~ .rise-target {
    box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(1, -1, 0, 2deg);
}
.rise-hover.rise-top {
    left: 50%;
    top: 0;
    transform: translate3d(-50%, 0, 0);
}
.rise-hover.rise-top:hover ~ .rise-target {
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(1, 0, 0, 2deg)
}
.rise-hover.rise-topRight {
    right: 0;
    top: 0;
}
.rise-hover.rise-topRight:hover ~ .rise-target {
    box-shadow: -10px 10px 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(1, 1, 0, 2deg);
}
.rise-hover.rise-left {
    left: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
}
.rise-hover.rise-left:hover ~ .rise-target {
    box-shadow: 10px 0 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(0, -1, 0, 2deg);
}

.rise-hover.rise-center {
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
}
.rise-hover.rise-center:hover ~ .rise-target {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(0, 0, 0, 0deg);
}

.rise-hover.rise-right {
    right: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
}
.rise-hover.rise-right:hover ~ .rise-target {
    box-shadow: -10px 0 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(0, 1, 0, 2deg);
}

.rise-hover.rise-bottomLeft {
    bottom: 0;
    left: 0;
}
.rise-hover.rise-bottomLeft:hover ~ .rise-target {
    box-shadow: 10px -10px 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(-1, -1, 0, 2deg);
}

.rise-hover.rise-bottom {
    bottom: 0;
    left: 50%;
   ...