daniel-c-harvey
49 lines
766 B
CSS
49 lines
766 B
CSS
.parallax-window {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: var(--window-height, 300px);
|
|
width: 100%;
|
|
}
|
|
|
|
.parallax-window.full-width {
|
|
width: 100vw;
|
|
position: relative;
|
|
left: 50%;
|
|
right: 50%;
|
|
margin-left: -50vw;
|
|
margin-right: -50vw;
|
|
}
|
|
|
|
.layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% var(--parallax-pos, 50%);
|
|
}
|
|
|
|
.layer-1 {
|
|
opacity: 1;
|
|
}
|
|
|
|
.layer-2 {
|
|
opacity: 0;
|
|
transition: opacity 400ms ease;
|
|
}
|
|
|
|
.parallax-window:hover .layer-2 {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.parallax-window {
|
|
--parallax-pos: 0%;
|
|
}
|
|
|
|
.layer-2 {
|
|
transition-duration: 0ms;
|
|
}
|
|
}
|