With CSS3’s webkit transition property and opacity properties, it’s easy to duplicate the effects of JavaScript and jQuery with CSS.
Insert this code into the body of your html:
Join us in our newest publication:
- <div id="fade">Hover over this text to see it fade away</div>
This css code will make the entire #fade div fade out to nothing when it’s hovered upon:
- #fade{
- opacity: 1;
- -webkit-transition: opacity 1s linear;
- }
- #fade:hover{
- opacity: 0;
- }
By defining the parameters of the -webkit-transition property to opacity 1s linear we are defining which property is going to transition (opacity), for how long (1s) and whether or not the transition is going to change speed throughout the duration (linear). The simplicity of this code makes CSS3 a real rival to jQuery in terms of creating this sort of fade effect.