'how to change image following mouse direction?

this the picture Hello can anyone help me to do this so i should make this by using css when mouse close to div, the picture will change to mouse direction

i cannot change the source or add the new script, only css thank you

<body>
        <div class="box">
            <div class="box_inside"></div>
            <div class="box_inside"></div>
            <div class="box_inside"></div>
            <div class="box_inside"></div>
            <div class="box_inside"></div>
            <div class="box_inside"></div>
        </div>
        <div class="box2">
            <div class="box2_inside"></div>
            <div class="box2_inside"></div>
            <div class="box2_inside"></div>
            <div class="box2_inside"></div>
            <div class="box2_inside"></div>
            <div class="box2_inside"></div>
        </div>
    </body>
htmlcss


Solution 1:[1]

I don't believe it to be possible to do so, you would need some javascript. I may be wrong, hopefully someone else can clarify.

Found and example on code pen with just one line of javascript though: https://codepen.io/w3codemasters/pen/pooLQaY

    $(document).mousemove(function (e) {
            $(".pointer").css({ left: e.pageX, top: e.pageY });
        });
    
    html {
            cursor: none;
            overflow: hidden;
        }
        .pointer {
            position: absolute;
            height: 480px; top:100px;
            width: 480px; left:50%;
            pointer-events: none;
        }

        .pointer img {
            width: 140px;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div class="pointer"> <img src="https://thumbs.gfycat.com/AmusingFriendlyBarasingha-size_restricted.gif" class="gif" alt=""> </div>
    



</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rob_clueless_code

Related Questions