Refer to the mouseenter event method. The mouseenter reference example is as follows

$('p').mouseenter(function(){    
    $(this).animate({
        opacity:0
    
    });
});

1. For one or two pictures: make a blurry picture and put it on top to control its transparency);
2. For many pictures: you can take a look at blur.js , use it to create a blurred picture and put it on top to control its transparency; (but this thing consumes more resources, and too many pictures will be very slow).

I don’t know if my understanding is different from the answer above.

I think your requirement is to compare the position of the mouse with the center point of the element, and then confirm a rule to blur your element.