web-html5-scripts/web-techniques/background-fade-demo/style.css
2020-05-07 20:51:13 +02:00

42 lines
848 B
CSS

body {
height: 100vh;
width: 100vw;
}
.past {
background: url("https://raw.githubusercontent.com/huijing/filerepo/gh-pages/bg-home-1965.jpg") 50%;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
}
.present {
background: url("https://raw.githubusercontent.com/huijing/filerepo/gh-pages/bg-home-2015.jpg") 50%;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
opacity: 1;
-webkit-transition: opacity 1.5s ease-out;
transition: opacity 1.5s ease-out;
}
.fade {
opacity: 0;
}
button {
position: absolute;
z-index: 3;
background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.7);
color: white;
top: 1rem;
padding: 0.5rem;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
cursor: pointer;
}