Multiple images click interaction?

Design help Custom code
1

Hi all,

I’m trying to create an interaction through “mouse click” on multiple images. I have one full main image, followed by 3 cut out images that I want to show up after every click. So the order can be as followed:

1st click: main image → square
2nd click → square - triangles
3rd click → triangles - face
4th click → face → back to main image

I’ve set the main image div as relative, followed by a separate div block that holds the square, triangle and face cut outs with absolute. I’ve tried to use “opacity 0% - 100%” and “hide/show” but both aren’t showing up when I toggle preview mode on top.
I’m thinking it might have something to do with the z-index, since the divs with the cut outs are all stacked, but after playing around a bit it doesn’t change… Anyone got any ideas?

The interaction can be found at the Login page designs (Logincont section)

Here is my public share link: Webflow - My portfolio

2

hi @Sanali121 there is no such “Login” page.

Anyway, to achieve such interaction you will need custom JS code. The basic principle will be like a slider.
on current image click:

  1. loop over all items and find one that has class eg. active
  2. remove this class from this item
  3. add class to next item in array
  4. when there is no other item in array set class to first item in array

This should work

If you would like for some reasons to preserve current status (number of clicks) on page reload you can use “session storage”

Good luck