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?