Hexagon has Line when Expanding

I can’t seem to figure out how to correctly resize the image so that it directly fits and resizes inside the hexagon-inner part. Can someone please help me figure this problem out. Thanks!



Not 100% sure but maybe put everything in a div tag, and set set a certain width and maybe resize the arrow. There is probably a better way but if you need a quick fix for the moment try this.

Using a CSS mask would probably work well here.

I have fixed it but now when the hexagon expands it shows a little line near the bottom and then that line disappears after it fully expands. Is there anyway of fixing it?