如何使用CSS创建背景图像的放大效果？

I've got a flex setup of list items to display information. I have a background image attached to these list items but I would like to create a zoom in effect when hovered or focused by a mouse. I think i'm partly on the way there, however my current setup makes it so that they are stretched out on mobile screens. I'm wondering if there's a way to achieve what i'm trying to do that is responsive. I've got a flex setup of list items to display