I am creating a 3x3 grid for my web portfolio that features a thumbnail of each project within each ‘cell’ of the grid. It is meant to act as a sort of nav from which you can access each project page.
Upon hover-on of each cell I would like for the image to swap to a different image (the same photo but with a colour overlay) and have text appear with the title of the project. Upon hover-out it reverts back to the initial state. If clicked it brings you to the project page for that project.
I’ve created the grid, and added a link-block div to populate the first cell. Within the link block div are the two images (one normal, one with overlay) with the overlay image set to display: none in order to hide it until it is activated as a hover state. I’ve attempted to create an animation that hides the regular image and reveals the overlay image upon hover-in, and then reverts upon hover-out.
The problem I’m running into is arranging the animations in such a way that I can apply the same animation to multiple link-block divs, thus allowing each project thumbnail to show/hide its respective overlay. As it currently stands I can get the animation to function properly for one instance, however when applied to a second thumbnail it continues to affect the other thumbnails and everything starts to break down.
I am trying to build this in such a way that I can continue to add projects over time, and would like to avoid creating more work in the long run through a convoluted series of unique animations per thumbnail which is the only way I can theorize this working with the knowledge I currently have (which isn’t a whole lot, I’m still new to Webflow). I have yet to incorporate the project titles into the equation and I’m sure that’s bound to complicate it even more.
Can anyone offer some advice? I’m finding it tough to find resources on hover-state image animations within the context of a grid since it incorporates several different elements and their inherit unique qualities. I suspect the solution lies somewhere in the “affect” section of the interactions>actions panel, and targeting the correct thing (selected element vs. class vs. interaction trigger) combined with the correct arrangement of elements within the navigator window. I just don’t know what that solution looks like.
Thanks in advance.
Here is my site Read-Only: SITE LINK<<<<<<The grid in question as all the way at the bottom of the page. You’ll have to scroll down through the content to see it.
(how to share your site Read-Only link)
Thanks for your response. I feel like creating an overlay within Webflow wouldn’t create the same visual effect I’m looking for on the overlay unfortunately. Also I would still require the project titles to show/hide upon hover regardless.
Hi @Clafond17 if I understand correctly you are looking for revealing an overlay on mouse hover.
These are just two of many solutions you can find here on forum. You can also use search input field to find another ones, to save your time here is another link.
I figured out what I was doing wrong. I did not realize you could set the trigger element and then select a DIFFERENT element for the animation to take effect on. It was only once I watched the following Webflow tutorial that I realized.
So I set the trigger element to the Link Block Div (within the first cell of the grid parent) and then set it to take effect on the link block div’s child elements (thumbnail image/thumbnail hover image) and then set the trigger to apply the action to the thumbnail images’ class.
Then I made sure the animation affects the specified child class, and that only children (of the trigger element) would be affected.
Now I can duplicate the link-block-div across the grid, swap out the images and it’ll work without the animations affecting every link block div in the grid.
I still have to animate the project titles so they pop up along with the overlay-thumbnail upon hover, but I think I understand how to do that now.
