Clouds Over Image
To add a cloud effect over cover blocks with images we use a class .cloud-and-fog and then add the following styles:
.cloud-and-fog {
overflow: hidden;
position: relative;
&:before,
&:after {
position: absolute;
height: 100vh;
width: 300vw;
z-index: 2;
content: " ";
background-repeat: repeat-x;
background-size: contain;
background-position: center;
}
&:before {
background: url("images/fog-1.png");
animation: marquee 132s linear infinite;
}
&:after {
background: url("images/fog-2.png");
animation: marquee 89s linear infinite;
}
}
@keyframes marquee {
0% {
transform: translate3d(0, 0, 0);
opacity: 0;
}
5% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
transform: translate3d(-200vw, 0, 0);
opacity: 0;
}
}Note: fog images are required in the theme folder.
“Blue Sky Thinking”
“Blue Sky Thinking”