I am looking to display an image inside a div and when mouse hover over it the border should appear inside the div in some sort of animated manner. I have done it using animated svg and it works for large screen but have no idea of doing it for smaller screens. there must be a proper alternative to it!!

I have attempted to do it using svg lines.. for which i used four such lines and added animation on each line and triggered it while hover. What is the proper way please. Codesandbox link link of what i have done till now. I want similar effect for variable image/div sizes.