Hiding elements with opacity
Problem
Recently I had a task that requires me to show an icon when a user hovers over a certain element and hide it after the user leaves the page.
Display none to the rescue
At first, I tried to use display: none as a default and display: block on hover. Yet it did not
work because when an element is display: none it will not take space. In other words, hovering over it
will result is resizing the contents of the parent element. It wasn’t looking good so I keep looking.
Opacity for the win
After I asked my colleague from work - he gave me a wonderful tip - use opacity. What exactly opacity
is doing? According to MDN it tells browser is element is visible or not. Opacity can be number
between 0 and 1. 0 means that element is no visible (but is still taking its place). 1 means
that element is fully visible. Elements between 0 and 1 forces element to be a bit dimmed and not
fully visible.
I applied opacity - and it does its job! An element is no longer visible but it is still taking its space.
Summary & TL;DR
You want to hide an element on the web page but you still want it to keep its space? Use opacity: 0\= to
hide and opacity:1 to show HTML element.