Hi everyone. new user here and just hit a brick wall. I’ve created a navigation page for my portfolio site and the rollover/hover states work about 75% of how I want them to.
But after 4 hours of tweaking and searching tutorials I’m pretty much stuck on perfecting it.
Each cell of the grid has a background colour of dark grey and link block within which contains an image (at 100% opacity) and a text block heading (at 0%) opacity when state is ‘none’
I’ve created hover state animations where the image opacity changes to 8% opacity (so it’s faint against the dark grey link block background) and the text heading becomes 100% opacity (white). When you hover outside the cell, the elements return to their original state.
Unfortunately 2 there are 2 problems…
-
The top left cell seems to be affecting when I hover over any other cell and
-
It seems like the text block is an active element which affects the hover. ie. it seems to negate the hover animation of the image even though the animation is applied to the parent link block.
Would really appreciate any solutions on this
Thank you
Phil
Here is my public share link: LINK
(how to access public share link)