Web Design Question - How To Do This Overlay Effect on Mouseover?

radderfire · 20 Jun 2016 at 17:37

Hi All

Can you take a look at this page and tell me what is the best way to do the nice black transparent overlay effect when you mouse over the product images in the middle of the page.

Thanks

kaku · 20 Jun 2016 at 19:01

In Chrome right-click -> inspect element. Mouseover the DOM nodes in the dev console and it will highlight the associated element in the main window, click them to see associated CSS.

If you right-click a DOM node in the console you can manually force :hover states so you can inspect the code difference with and without. Basically, it's a semi-transparent black square which is moved outside of the parent element then clipped. On hover the black square transitions down into view.

One change I would make to the implementation: they transition the black overlay element using the "top" property. I would change this instead to use a transformation, which should be more performant. However, there is a potential small downside in CSS3 transform cross-browser support, so it depends on the exact requirements.

radderfire · 20 Jun 2016 at 22:10

Thank you for that.

radderfire · 15 Jul 2016 at 13:44

Can anyone give me a link for a good tutorial on how to create this particular CSS3 transformation, i.e. a transparent black overlay on any photo?

Thanks

jubei · 16 Jul 2016 at 13:13

radderfire said:
Can anyone give me a link for a good tutorial on how to create this particular CSS3 transformation, i.e. a transparent black overlay on any photo?

Thanks

Is this what you are after?