Interactive photo - how?

Hello guys, please don’t be mad on me but I don’t know how to explain my problem. I’m trying to make interactive photo ( I split my bacground pohoto on two parts) while I hover on right part (the photo for example will zoom in) but there is problem with transparent background in png, it take to much space and cover a left part photo. Is there a way to remove unnecessary invisible background ? Here’s my project:

https://codepen.io/Marcin03/pen/ZOqWBY

Hey, can’t you just crop the photo with whatever tool you want? BTW: maybe you will like transition, add this:
.multi_bg2{ transition: all 0.2s; }

1 Like

Thank you for suggest ! When I crop the photo by cssplant.com my all croping shape going wrong…
http://codepen.io/Marcin03/pen/OXBqqy Have you any idea how to fix this ? :slight_smile:

And if you use paint (if you are on windows)?

Yes, I’m on windows. I can’t use a paint beacause if I save a photo there will be a white background and I don’t know if there is a way to delete picutre’s background in css. This is my biggest problem… The width of the entire image take 1300px but only where soldiers are take 600px.

Maybe this helps.

Thank you for help but pen doen’t display correctly for me :frowning:

I know, but you can change the link to a random picture. Or use this