Make background fade out/in
66,990
Solution 1
Sure, you can use the transition property directly on the background-color
:
div {
background-color: white;
/* transition the background-color over 1s with a linear animation */
transition: background-color 1s linear;
}
/* the :hover that causes the background-color to change */
div:hover {
background-color: transparent;
}
Here's an example of a red background fading out on :hover
.
Solution 2
You may find this useful for examples of image and background color fades: - http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
However using CSS 3 to do the transition will limit the effect to browsers that don't support it.
Author by
cmplieger
Updated on July 13, 2022Comments
-
cmplieger almost 2 years
Is there any way I can use CSS3 to fade in and out a solid white background of a
<div>
? the content should remain visible so just the background should fade.Any ideas using css3 transitions/transforms?
thank you for your help.