Currently, I am attempting to incorporate a radial gradient as the background of my blog post card. My objective is for this radial gradient to move along with the cursor when the user hovers over the blog post card. To better illustrate this effect, you can view an example of my code here: https://codepen.io/D_s/pen/OJNpNBV.
The challenge I am facing is that the functionality is not working as anticipated due to other div elements within the card (such as the title, image, tags, and button) causing interference with the hovering effect. How can I go about resolving this issue? Below is the snippet of code pertaining to the blog post card:
let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
let rect = e.target.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
backgroundgradient.style.setProperty('--x', x + 'px');
backgroundgradient.style.setProperty('--y', y + 'px');
}
Any assistance provided would be greatly appreciated! Thank you.