Opacity vs Display for hover on reveal

Hey guys, was just wondering what people used and what is recommended as I’m not a long time coder. In webflow there are a few ways to reveal an image on hover and I was wondering the best way to do this?

One way I’ve found is common is to have the opacity down, then bring it up on hover.

Another way is to set the display to none (whether on the items properties or in the interactions panel on initial state) then while hovered over it turns the state to inline or what ever you want (in my case it’s positioned absolute so it won’t matter). This is in addition to the opacity, as seen on the site linked below.


Here is my site Read-Only: https://preview.webflow.com/preview/combinde?utm_medium=preview_link&utm_source=designer&utm_content=combinde&preview=bb3b3b14ee0e6813e3829ab159ab0a85&pageId=61b0e3f19cbcaa781f477189&workflow=preview)

Hi @Enzooo and welcome there are major differences between opacity, visibility and display. As this question is not about WF platform but about basics of CSS you can find many articles including impact on accessibility on internet. Here is one article with short description but feel free to find one you will understand.

or

1 Like

Okay, I realize that now. This was exactly what I was looking for, thank you!

1 Like

If you do not have further questions related to this topic feel free to close this request as solved.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.