0
I want to map an image, dividing it into 'n' equal parts, and apply "zoom" effects as I move the mouse over each part.
A practical example would be to divide a 100x100 image into 4 equal parts of 25x25 size. Each of these parts, when the mouse is superimposed, will slightly increase in size.
That last part I know how to do, but I don’t have a good idea how to split the image. I was thinking about using JS, but I didn’t find anything very specific. From what I saw, in general, use the tag <map>, but I don’t see a way to manipulate this massively and generically.
Taca 4 div and gone. kkkk
– wDrik
@Drik this doesn’t help much, because I need it to be done for any screen dimension. I need to calculate the size of the person’s device and apply the effect.
– Rafael Pessoa
plus.. a div can adapt to any size and device.
– wDrik
@Drik you could exemplify how to divide the image into 4 using div?
– Rafael Pessoa
Dude, I don’t know in practice if it’s going to work out.. but I’ll pass on the logic so you can help out.. for example: you have a 100x100 image okay? You will leave her with position: Absolute; and play 4 div over her with 25x25 each.. then just make the zoom effect when hover over each div.. make everything responsive and bye!! remembering that it is just a suggestion not tested to see if it really works.. I hope it helps!
– wDrik
ever thought of cutting the image in photoshop? and throw 4 pieces of it html... might be an alternative.. !
– wDrik
@Drik photoshop does not roll, because I intend to do n clippings in the image. It is not feasible. And I will analyze the first case. I can create n div’s. It’s an option. Thank you
– Rafael Pessoa