ImagesLesson 70Free preview

Image Overlay Icon

This lesson is part of How To · All levels

Summary

Image overlay icons display icons such as magnifying glass or links in the middle of the image while hovered. The icon is positioned absolutely and centered with a combination of top, left, and transform. This effect gives visual indication that the image can be magnified or opened.

Key points

The icon is positioned absolute inside the relative container.
Top: 50%; left: 50% with the icon centered.
The opacity of 0 hides the icon, then becomes 1 while hover.
The transform scale can add icon-enlargement animation.
Decorative icons are given hidden aryas, while links still require labels.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.