I will be honest, your image hover effect is completely broken.
For those type of effects you never use another image.
If you are not using any fancy animation libraries like gsap or framer-motion, most often you will be creating an pseudo elements :hover::before and :hover::after. One of which will be just a positioned absolute box (top: 0, left: 0), with width 100% and height 100%. Another one will be an container for png image (if background must be transparent otherwise jpg) also property background: no-repeat url("../path/to/my/cool/maybe/not/image") must be included, and also positioned absolute (top: 50%, left: 50%).
Also you must keep in mind that when you are working with pseudo elements like before and after you must specify the content: "", property and display, or those pseudo elements will not display.
And of course there is other way to do things. You can look at my example NftPreviewCardComponent Repo Keep in mind that i use Gsap for animations, so manipulated elements must be present in DOM. Also my implementation of overlay for background is not quite right, but kinda it still works with such a small project, so i sticked to easy implementation for overlay.
Marked as helpful
