Monday, September 10, 2018

Hovering icons in Help pages

Last week I implemented a feature in our help pages using a modern CSS (Cascade Style Sheets) technique when hovering the mouse pointer on icons displayed in the page: the hovered icon is enlarged twice its size.

Almost every icon in the help pages are sized 0.22 in x 0.22in (~0,5cm x 0,5cm) which is sometimes a bit too small, especially with minimalistic designed icons such as the Colibre icon family. Enlarging the icons helps user to visualize and since it was implemented in CSS, there was no need to change the icons dimensions in the source help pages.

To see it working, please check this page and hover the mouse on icons.

Normal size

Enlarged on hover


Comments and suggestions are welcome.

Happy icon hovering!