JSFiddle - React, Tailwind, and code Playground

javascript to make a hover element that leans towards mouse

by Travis Almand

HTML

<p>Move the mouse cursor around inside the box.</p>

<div class='rise-container square'>
    <div class='rise-target'></div>
</div>

<p>Differently sized box.</p>

<div class='rise-container rectangle'>
    <div class='rise-target'></div>
</div>

<p>Circle for fun.</p>

<div class='rise-container circle'>
    <div class='rise-target'></div>
</div>

CSS

html,body {
    height: 100%;
    width: 100%:
}
.rise-container {
    perspective: 100px;
    position: relative;
}

.rise-target {
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
    bottom: 0;
    height: 200px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg);
    transform-style: preserve-3d;
    transition: all 0.25s;
    width: 200px;
}
.rise-target:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(0, 0, 0, 0deg);
}
.rise-target.topLeft {
    box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(1, -1, 0, 2deg);
}
.rise-target.top {
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(1, 0, 0, 2deg);
}
.rise-target.topRight {
    box-shadow: -10px 10px 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(1, 1, 0, 2deg);
}
.rise-target.left {
    box-shadow: 10px 0 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(0, -1, 0, 2deg);
}
.rise-target.right {
    box-shadow: -10px 0 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(0, 1, 0, 2deg);
}
.rise-target.bottomLeft {
    box-shadow: 10px -10px 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(-1, -1, 0, 2deg);
}
.rise-target.bottom {
    box-shadow: 0 -10px 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(-1, 0, 0, 2deg);
}
.rise-target.bottomRight {
    box-shadow: -10px -10px 10px 0 rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 0, 10px) rotate3d(-1, 1, 0, 2deg);
}

.square {
    height: 200px;
}
.square .rise-target {
    height: 200px;
    width: 200px;
}

.rectangle {
    height: 100px;
}
.rectangle .rise-target {
    height: 100px;
    width: 300px;
}

.circle {
    height: 200px;
}
.circle...

JavaScript

var $target = $('.rise-target');

$target.on('mousemove', function (e) {
    var $this = $(this);
	var x = Math.floor(e.pageX - $this.offset().left);
    var y = Math.floor(e.pageY - $this.offset().top);
    var quarterWidth = $this.width() / 4;
    var quarterHeight = $this.height() / 4;
    var halfWidth = $this.width() / 2;
    var halfHeight = $this.height() / 2;
    var thirdWidth = quarterWidth + halfWidth;
    var thirdHeight = quarterHeight + halfHeight;
    
    $this.attr('class', 'rise-target');
    
    // corners
    if (x < quarterWidth && y < quarterHeight) {
        $this.addClass('topLeft');
    }
    if (x > thirdWidth && y < quarterHeight) {
        $this.addClass('topRight');
    }
    if (x < quarterWidth && y > thirdHeight) {
        $this.addClass('bottomLeft');
    }
    if (x > thirdWidth && y > thirdHeight) {
        $this.addClass('bottomRight');
    }
    
    // sides
    if (x > quarterWidth && x < thirdWidth && y < halfWidth) {
        $this.addClass('top');
    }
    if (x > halfWidth && y > quarterHeight && y < thirdHeight) {
        $this.addClass('right');
    }
    if (x > quarterWidth && x < thirdWidth && y > halfWidth) {
        $this.addClass('bottom');
    }
    if (x < halfWidth && y > quarterHeight && y < thirdHeight) {
        $this.addClass('left');
    }
    
    // center
    if (x > quarterWidth && x < thirdWidth && y > quarterHeight && y < thirdHeight) {
        $this.attr('class', 'rise-target');
    }
    
}).on('mouseleave', function () {
    $(this).attr('class', 'rise-target');
});