Can you guys please add a tutorial on how to create example 5 from the IX page?

My question is about the design of the element itself and also the interactions.

  1. 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.

  2. 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!

Thank you for your time and effort,

Richard Nash
Los Angeles, CA

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

Where is this “IX page” ?

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 :smile:

Hi guys,

I will be making the video for example 5 this weekend!

In the meantime, you can take a look at the Public Link for the Interactions website here and see how it was built: https://webflow.com/design/interactions?preview=8566312743353562051c799dc925c01e

Thanks again!

1 Like

Awesome! Thank you so very much Matt. I’m learning this web design thing slowly but surely and webflow has been a big part of that :slight_smile:

Thats what we want, thank you!!

Was this video tutorial created? I can’t seem to find it anywhere.

Hi @bsmity,

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 :wink:

Thanks!

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.

Thanks!
Curt

Is there any update to this; that public site link isn’t working anymore

thanks guys

1 Like