Streaming live at 10am (PST)

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?

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