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