For this question lets consider only no-touch devices and lets assume it is alright to hide that text.

It is common, specially on grid layouts, to display image overlays with different levels of opacity on mouseover.

  1. This example seems to me an acceptable level of layout opacity as the image can still be seen.


  1. In this other example the image is completely hidden by the overlay. Also notice how it is not possible to avoid hovering an image and in consequence to see all images at the same time:


Is showing information on behalf of hiding other information bad practice? Or does it depend on the level of opacity? Is it alright to hide completely the layer which the hovered/just-shown layer is giving information about?

  • Please post images. Using direct links to a website may break this question in the future. In addition it's broken for me, since our firewall seems to block parts of it. – Thomas Weller Nov 22 '16 at 11:48
  • 1
    Personally, I like having the first option, but without showing the title on hover. Why not just show the text already without user interaction? Seems like too much work for a simple thing? – Majo0od Nov 22 '16 at 13:12
  • There are situations, check this question. For the sake of this question lets assume it is alright to hide that text (or lets say the title is visible below and the overlay text is some extra information). – Alvaro Nov 22 '16 at 13:18
  • "Also notice how it is not possible to avoid hovering an image and in consequence to see all images at the same time" - I don't understand. In the end of the second animation, the cursor leaves the tile area, whereupon all images are visible at the same time. – O. R. Mapper Dec 20 '16 at 15:31
  • You are right, I mean if the mouse is on the page, but that is just a side comment. – Alvaro Dec 20 '16 at 15:33

It's really your call on this one.

Generally you would be correct in your concern for weather or not hiding information is a bad thing. In your case however this is debatable. Take the images, for example. Those images are designed to draw the end-user's attention towards the element, and get them to click on it. By the time they hover over the element, your graphics have already served this purpose, thus providing thin with additional information which then allows them to decide if they absolutely want to click on that item.

It's not a bad practice at all, perhaps it feels clumsy or a poor experience itself.

Although I was thinking, it is not good to only show text when a user hovers. It turns your user experience into one of those card games where they must look again if they forgot "where that thing was" and I don't think that helps the users much.

An idea I have:

If your text for each item is so short, how about aligning it to the bottom and applying a gradient that fades past the top of that text? The gradient wouldn't cover the whole photo and should be partially see-through. Then make that text/gradient overlay fade upon hover.

Here I have created a gif example of what I am describing:

overlay example


(Golden Bokah image source: https://www.youtube.com/watch?v=DzVnGQ8KBmE)

I'll post the following just in case giphy looses the animated gif so that others can see the concept:

static version of example

So to answer your question, which is a question of opinion (in my opinion): yes, an image overlay can be too obstructive if your intention is the preservation of information on the screen for the end user.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.