Krzysztof Żuraw blog

Hiding elements with opacity

April 22, 2019

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.


Want to get blog posts via email?

Powered by Buttondown.



Krzysztof Żuraw

Written by Krzysztof Żuraw who lives and works in Wrocław. You can find more on about page and subscribe to rss feed.