Help with hover please :)

Hey guys,

I’m looking for some advice on how to go about implementing a hover over action on my case study grid.

What I’m looking for is a 50% black background transparency on hover over each grid item on my case study page, with some dead centre headline text.

I’ve done a mockup below to give you guys an idea of exactly what I want to do. The mockup shows the hover over the second case study (phineas). This exactly how I would like it to look.

Any advice would be much appreciated on how I would go about/the best way to approach this interaction.

Please find the live and read only links below:


Hello Rich. The secret is on the animations. Here’s an example:

Here’s the read-only

Here’s an tutorial on Hover Interactions: