Combining multiple images into one image using CSS

I need to combine multiple parts of an image join and form the complete image using CSS animation. Please help. Thanks in advance. So each part is a separate image.
13 Replies
MarkBoots
MarkBoots8mo ago
we need more explanation than this. Also a preview of the start and end state would be useful
JaisonJ
JaisonJ8mo ago
okay
JaisonJ
JaisonJ8mo ago
No description
No description
No description
No description
JaisonJ
JaisonJ8mo ago
We have to combine the three images into the 4 th image. So it should look like an animation. Sorry for the delay in updating this.
ἔρως
ἔρως8mo ago
you are overcomplicating. at the same time, not complicated enough (depending in what you want) the question itself is easy: just use svg then animate with css or svg or, use a grid with 2 columns and 3 rows then do whatever you need in css
JaisonJ
JaisonJ8mo ago
Thanks @ἔρως So you are saying that these images have to be converted into svg format and then animate it using css. Is that correct?
ἔρως
ἔρως8mo ago
no, but that is an option
JaisonJ
JaisonJ8mo ago
So basically the way how these images combine to form one image should be displayed on the page
ἔρως
ἔρως8mo ago
listen, they will never be one image, unless you take a screenshot all you can do is fake it or use canvas, but if you are asking this, i highly doubt you know how to use javascript and the canvas 2d context to draw the image faking it is the most sensible option anyways
ἔρως
ἔρως8mo ago
something like that
MarkBoots
MarkBoots8mo ago
As I am seeing it (correct me if I'm wrong), It shouldn't be all images. I notice there are select boxes and an input field. So why not just use 1 background image (shirt) , the logo on top of it (sliding in) and the text/form as actual text and form.
ἔρως
ἔρως8mo ago
no, it shouldnt, since it is supposed to be interactive also text