Hover reveal CMS project image in singular location, not per item

I would like to cause hover actions per item in a CMS grid to reveal the project image in a set, consistent location that is outside the grid.

Currently I have a portfolio project CMS that I’ve organized into a grid. Each item has an SVG dot that animates on mouse-over, as well as a project image reveal in the top corner of the item:

This is active on my live site. When you hover over each dot, the corresponding project image will appear over that dot. I really like the effect of the project image reveal, but I don’t like it revealing over each dot.

Instead I would like to change the project image reveal location to be a consistent position, independent of the dot’s location within the grid. See here:

Thus when you would hover over each dot, the respective project image would reveal to the left in the same place every time. (or above or below, etc. - the idea is the project image should be relative to the cms box/section and not the item box inside the cms grid.)

I tried using two CMS containers and referencing the items of one container with mouseover actions on items in the other, but that didn’t work. Any ideas?

http://brianksowell.webflow.io


Here is my public share link: 1
(how to access public share link)

Ok, so I figured this out. I had to create multiple CMS items, then added a filter:

So first, one section with two div blocks, left and right. Left Div block we’ll call Image. Right div block we’ll call Dots.

Inside ‘image’ I placed multiple Div Blocks, one for each project I want to show, and arranged them absolute so they all occupy the same area (stack on top of each other in Z space). Inside each div block I placed a CMS block, and then placed an image reference inside the item tied to the project main image. I gave each parent Div a separate numbered name (same as project number) so I could differentiate them and use them as the interaction target. Finally, I set the filter of each CMS block to the relevant project number. This caused each separate CMS block to only display one project image. Then because each div block had a CMS block with a separate filter, each div block was effectively a different project. (Note, I found the Div block parent was key, as I couldn’t get the interaction to trigger on the CMS block itself. Only a div parent could hide/show or have an opacity effect.)

Dots was trickier to figure out. I ended up using a grid, then placing separate, new CMS blocks inside each grid item. Then, I applied the same project number filter to each separate CMS block so they would only show one project. For clarity, I named each CMS block by the project number. I messed around with several options for the interaction trigger. Originally I was using the CMS block itself inside each grid cell, but the size wasn’t as controlled as I wanted. I figured I was able to use the custom HTML (SVG dot) as the trigger element.

The final step was just creating a classic hover animation for the dot. Then based on which dot (CMS block) I was using as the trigger, I would target the corresponding Image Div block with a hide/show and opacity animation.

Sometimes it’s a bit laggy, and I know it’s because there’s a lot going on behind the scenes. If someone knows a cleaner way to make this happen, I’d love to hear it.

Hope this helps someone who was similarly stuck.

1 Like