My question is about the design of the element itself and also the interactions.
How do I make an element like an album cover that has multiple layers that show up when I hover over it? I want to do exactly this type of thing with a site that I am building.
I would love it if you guys added one more video explaining how then to add interactions to the multi layer awesomeness!
My knowledge of HTML, CSS and JavaScript is limited but growing. This example is beyond my understanding at the moment, though, so any help that you would be willing to share would be fantastic!
Agree! I can’t seem to figure out how to have the one trigger (hover) to effect 3 different elements stacks on top of each other as in the example. It’s quite confusing
I don’t know where the example is. But Interactions to other elements are based on classes.
You can either set the same classes to all your targeted elements, or nest them in a div with such class.
Here is the page that webflow created to showcase the capability of interactions:
Example 5, which is a piece of album artwork that reveals 3 layers or so of “stuff” (dunno what else to call it) when you hover over it is almost exactly what I want to create but I do not know where to begin creating it.
I understand the CSS animations part of it, but how do you layer 3 or more things on top of each other at all?
If you can help out or point me in the right direction or give me some pointers, that would be awesome
I posted the Public Site instead, but if it’s still something you want I can absolutely add it back on the list and make a tutorial video for it. It’s a tricky one
Hello Mat, I did find the link to the public site and will look into this a little later. I think a video tutorial would be fantastic for this. I’m sure others would benefit from the tutorial as well. It would be good to see best practices when it comes to complex interactions.
Thanks Matt.
Hi @Mat I wasn’t able to track down that tutorial on Example 5. Could you shoot me the link? I’ve been trying to do something really similar to this.