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

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.
 
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
 
You must log in or register to reply here.
Back
Top Bottom