Changing interactions

Hi,

I need some help with these topics:

  1. In the first visual grid, since I have created a colour to appear on images on hover, the whole grid of section 2 appears above the fixed nav bar. What do you suggest I do?
  2. In Project Section 2, I cannot get the grid container to move down 70 pix from the section. Instead I have used a div bar at the top and bottom to create space.
  3. In Project Section 2, I want the div blocks in the text to have an image on hover. I can do that but can’t get the text to be hidden.

Any help with this would be appreciated.
Here’s the link:
https://preview.webflow.com/preview/lumos-web-2?utm_medium=preview_link&utm_source=dashboard&utm_content=lumos-web-2&preview=c9b524aa4423e955b55f1c984d9b38a8&mode=preview

Thanks,
Shonali

  1. set the navbar’s z-index to 999
  2. add padding to the section
  3. I couldn’t see without an image there but I’d suggest changing the z-index again.
    Here’s an article about the z-index Apply a z-index value | Webflow University

Thanks, Sarah. This really helped! I have a whole lot of other questions which I will post once I have created the basic concept of the home page and how I want each section interaction to behave.

Hi Sarah,
I’ve added the images on hover for Project Section 2 and set the z-index to 2 for each. I’ve used them as background images. However, when I hover the text is still visible with the image. Any suggestions to remedy this?

In the Project section below the hero section, I have managed to change the image from bw to colour on hover. I do need the whole row to go slightly darker on hover. How do you suggest I do this?

Thanks,
Shonali

I had a look at the way you’ve been doing this and I’d suggest using interactions for the ‘project section 2’.
That way you can set a z-index value for the image as well. So the z-index would be, for example, 9, while the other items are set to 1. Then you’d use ‘reveal on hover’ interactions to display/hide’ the image.
The way you’ve set it up now doesn’t allow this.
Here’s the webflow guide to interactions. Make sure to read/watch the articles linked below the article to learn more about applying interactions, this is just the introduction.

For the ‘project’ section, I’d use interactions as well.
What you’re saying is, you want the square with the title (see screenshot) to go darker while someone hovers over either that square as well as the image to change. So both at the same time? That’s only possible with interactions.

If you just want the square with the title to change on hover, that’s something you could do with the ‘hover’ state, as you’ve done now for the image color.

Thanks, I will go through the interactions videos you’ve pointed me to.
For the project section, I would like each row to have an interaction (and not the individual squares), as in the image should change colour and the text panel should become darker. Not sure if I have set this up correctly. Right now it is 2 column grid with 2 rows. Do I need to set up each row separately as a grid?

@shonali that shouldn’t make a difference to set up the interaction. You can select several elements in an interaction so they don’t have to be separate

Thanks so much for all your help, Sarah.

you’re very welcome, that’s what we’re here for :slight_smile:

Sarah, I’m back again! I’ve gone through the interaction videos and tried using various interactions with disastrous effects, so I’ve deleted them all.

For the project section:
How can I get the square with the image to change to a coloured image and the text block next to it to go slightly darker at the same time? That should only happen if I hover anywhere in the first row.
The second row should have the same effect but only when the user hovers on the text or image block in the 2nd row.
Do I need to set the two rows up as two div blocks? Right now they are part of a single grid.

Thanks in advance!

I’ll get a video up with the way I’d do it after the weekend to show a way of doing things.
The key is to be careful where you’re clicking once you’re in ‘animation edit’ mode, shown by a blue box at the bottom of the screen. This is where I went wrong at first, clicking anywhere once you’re in animation mode, will add that element to your animation.
It might be a good idea for you to try and rebuild one or two of the animations shown in the university, follow along with each step and see what’s being clicked on, what settings are used etc.

Thanks, will follow that Sarah and see where it goes. Look forward to the video!

Here’s a link to the video recording. I did record as I went along and figured it out so I’d suggest you watch the whole thing first before you start to build it. Let me know if you’ve got questions :slight_smile: EDIT: looks like I hit a dropbox limit when uploading the video :woman_facepalming:. Looks like you’ll have to download the video :roll_eyes: https://we.tl/t-CooSR44bo4

Thank you so much, Sarah! I really appreciate the time and effort you’ve put in to do this for me. Will go through the video and see how best I can follow your instructions and will get back to you once I am done :slight_smile:

Quick question again. For project section 2 I have used a grid. Do you recommend I use div blocks here to and get rid of the grid? In this case, each square on mouseover will have a different image and not the whole row.

Thanks,
Shonali

@shonali in that project section 2; what exactly do you want to happen? If it’s an image that only appears when someone hovers over that image, I’d leave it as is. Use the image itself as the trigger :slight_smile:

Yes, that’s precisely what I want to do. Will leave it as is!

Hi Sarah,

Help again please! I tried out the interactions as per your video. Now what’s happening is that even though I have created an interaction trigger div block for both rows only the image changes colour and not the background of the text block next to it. What do I need to sort out?

Thanks,
Shonali

You need to create a new interaction for the second row :slight_smile: . The hover interaction you’ve got set up applies to that second row only. That’s because you applied it and then edited without duplicating :slight_smile: . That’s what I meant when I said, be careful when you click somewhere, it takes a while but you’ll get the hang of seeing what’s selected etc :slight_smile:

Sorry, still completely lost!