CSS
body {
background: #f5f7fa;
}
body > label {
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -116px;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
padding: 5px 25px;
background: #885586;
border-radius: 2px;
font-weight: lighter;
color: #fff;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ #banner,
input[type="checkbox"]:checked ~ #modal {
display: block;
}
#banner {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FAF9F7;
z-index: 0;
}
#modal {
position: absolute;
display: none;
left: 50%;
top: 50%;
width: 500px;
height: 350px;
margin-left: -250px;
margin-top: -200px;
text-align: center;
border-radius: 2px;
border: 2px solid #8F66A2;
box-shadow: 0 0 5px #FF0000, 0 0 5px #0000FF;
background: url(https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/11355088_1679581328925325_1219774752_n.jpg?ig_cache_key=MTE5NzI0MjA4MjI5MTg1NDMwMQ%3D%3D.2);
background-size:cover;
background-repeat: no-repeat;
color: #424242;
-webkit-animation: fall-in 0.35s;
-moz-animation: fall-in 0.35s;
-o-animation: fall-in 0.35s;
animation: fall-in 0.35s;
}
#modal label {
position: absolute;
top: -6px;
right: -6px;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
border-radius: 50%;
color: #fff;
background: #885586;
font-size: 8px;
cursor: pointer;
}
#modal i {
margin-top: 200px;
color: #b646f2;
font-size: 5em;
text-shadow: 0px 4px #e6e9ed;
}
#modal h2 {
margin-bottom: 5px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
color: white;
text-shadow: 2px 2px 4px #000000;
}
#modal p {
padding: 0;
margin: 0;
font-size: 10px;
font-family: 'open sans', sans-serif;
color: white;
text-shadow: 2px 2px 4px #000000;
}
@-moz-keyframes fall-in {
0% {
-ms-transform: scale(3, 3);
-webkit-transform: scale(3, 3);
transform: scale(3, 3);
opacity: 0;
}
50% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1;
}
60% {
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
100% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@-webkit-keyframes fall-in {
0% {
-ms-transform: scale(3, 3);
-webkit-transform: scale(3, 3);
transform: scale(3, 3);
opacity: 0;
}
50% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1;
}
60% {
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
100% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@-o-keyframes fall-in {
0% {
-ms-transform: scale(3, 3);
-webkit-transform: scale(3, 3);
transform: scale(3, 3);
opacity: 0;
}
50% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1;
}
60% {
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
100% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes fall-in {
0% {
-ms-transform: scale(3, 3);
-webkit-transform: scale(3, 3);
transform: scale(3, 3);
opacity: 0;
}
50% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1;
}
60% {
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
100% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
