element.If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: ... CSS Transitions. below.) When the div has the active class, I want to change the opacity to 1. menu element must be visible, because otherwise the effect would Examples might be simplified to improve reading and basic understanding. Examples might be simplified to improve reading and basic understanding. Basic idea is to reduce an elements opacity from 1 (meaning fully opaque) to 0 (meaning fully transparent) in order to fade-out the element. W3Schools is optimized for learning, testing, and training. All that changes with CSS opacity transitions. Transition on Hover. CSS3 - Opacity transition is not working. that links on the faded element stay active while links on elements covered you see an ordinary link, which however has the problem that it does (If you think this example is a bit We can do this using the `transition-delay` property, and apply a different delay to the opacity transition (no delay) and to the visibility transition (delay equal to the duration of the opacity transition). Try it Yourself » Go to our CSS Transition Tutorial to learn more about transitions. Note, however, that while the fade visual effect is running, the In this case we want the image to NOT be transparent when the user hovers over it. CSS transitions allows you to change property values smoothly (from one value to another), over a given duration. The Web author can define which property has to be animated and in which way. An example of reversed hover effect: The second example now shows the problem with this technique: Here This is similar to our previous test except this time we’re trying to delay the application of `visbility:hidden` using pure CSS. In this case we want the image to NOT be transparent when the user hovers over it.