I want these images to display when hovering over the title in addition to that when I hover and move my cursor around the title I want the image to follow the cursor. I am new to JavaScript, any help from you guys would be much appreciated.
.container {
display: inline-block;
}
.manImg {
display: none;
}
.manImg2 {
display: none;
}
.hover-text {
color: black;
text-align: center;
font-size: 50px;
letter-spacing: 5px;
line-height: 3px;
font-family: Odachi;
}
.hover-text:hover {
color: red;
}
.hover-text:hover~.manImg2 {
display: block;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
width: 100%;
background: url(https://awallpaperaday.com/wp-content/uploads/2019/03/orange-cliffs-1920x1080-1860x1046.jpg) center;
background-size: cover;
position: fixed;
z-index: -9999999999;
}
.hover-text:hover~.manImg {
display: block;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
width: 100%;
background: url(https://th.bing.com/th/id/R.1084082127f8d9d45194657db272109e?rik=6tKaSe%2b57Mvvkg&riu=http%3a%2f%2fimages.freehdw.com%2f510%2f3d-abstract_widewallpaper_fulfill-wish_50806.jpg&ehk=Tlkf5BUKl0223C4FgHOuHAHIe5tedec%2bWhkhyj5tHyI%3d&risl=&pid=ImgRaw&r=0) center;
background-size: cover;
position: fixed;
z-index: -9999999999;
}<div class="module-jamf" id="module-jamf">
<a class="jamf-container" id="jamf-container" target="_blank" rel="noopener">
<center>
<p class="hover-text">TITLE1</p>
<img id="new" class="manImg" src="">
<div class="jamf-mover" id="jamf-mover">
</div>
</a>
</div>
<div class="module-jamf" id="module-jamf">
<a class="jamf-container" id="jamf-container" target="_blank" rel="noopener">
<center>
<p class="hover-text">TITLE2</p>
<img id="new" class="manImg2" src="">
<div class="jamf-mover" id="jamf-mover">
</div>
</a>
</div>I want these images to display when hovering over the title in addition to that when I hover and move my cursor around the title I want the image to follow the cursor. I am new to JavaScript, any help from you guys would be much appreciated.
I suggest you bind to the mousemove event on the document and then use that to track the mouse x and y position, then translate that value to the background position of said images, just add the below javascript to your page (at the end of the document in script tag after the jquery js library import)
I'm using the latest version of jQuery
$(document).on('mousemove', (e)=>{
let el = $('.manImg');
el.css({"background-position": (el.width() + e.offsetX) + "px " + (el.height() + e.offsetY) + "px"});
let el2 = $('.manImg2');
el2.css({"background-position": (el2.width() + e.offsetX) + "px " + (el2.height() + e.offsetY) + "px"});
});
Here is a jsFiddle Example
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>