Skip to content

Instantly share code, notes, and snippets.

@robertstaddon
Created August 17, 2017 07:25
Show Gist options
  • Save robertstaddon/9fa268f89f08684d0bc3f356a7539500 to your computer and use it in GitHub Desktop.
Save robertstaddon/9fa268f89f08684d0bc3f356a7539500 to your computer and use it in GitHub Desktop.
Divi - CSS rule for an overlay (with animation)
.background-fade .et_pb_slide.et_pb_bg_layout_dark:after {
position: absolute;
content: '';
top: 0;
right: 0;
left: 0;
bottom: 0;
animation: customFadeToDark 3s ease-out 1s 1 both;
-webkit-animation: customFadeToDark 3s ease-out 1s 1 both;
}
@keyframes customFadeToDark {
0% {
background-color: transparent;
}
100% {
background-color:rgba(0,0,0,.5);
}
}
-webkit-@keyframes customFadeToDark {
0% {
background-color: transparent;
}
100% {
background-color:rgba(0,0,0,.5);
}
}
.background-fade .et_pb_slide.et_pb_bg_layout_light:after {
position: absolute;
content: '';
top: 0;
right: 0;
left: 0;
bottom: 0;
animation: customFadeToLight 3s ease-out 1s 1 both;
-webkit-animation: customFadeToLight 3s ease-out 1s 1 both;
}
@keyframes customFadeToLight {
0% {
background-color: transparent;
}
100% {
background-color:rgba(255,255,255,.7);
}
}
-webkit-@keyframes customFadeToLight {
0% {
background-color: transparent;
}
100% {
background-color:rgba(255,255,255,.7);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment