.cta
%a.button(href="#peek-a-boo") CSS Only Modal
%p Using :target you can do a pure CSS modal. Click the above button to see it in action.
#peek-a-boo
%div Peek-a-boo
%a(href="#") close <span>×</span>
View Compiled
@import "compass/css3";
.cta {
position: absolute;
top: 50%;
width: 100%;
@include transform(translateY(-50%));
}
.button {
display: block;
width: 150px;
margin: 50px auto 30px;
padding: 15px 30px;
font: 500 30px/32px sans-serif;
color: #3b3b3b;
text-transform: uppercase;
text-decoration: none;
text-align: center;
background: #bad455;
@include transition(color .25s ease-in-out, background .25s ease-in-out);
&:focus,
&:hover {
color: #bad455;
background: #3b3b3b;
}
}
p {
max-width: 400px;
min-width: 280px;
margin: auto;
font-size: 18px;
text-align: center;
}
#peek-a-boo {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 100px 0;
font: 700 100px/80px sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background: rgba(122,85,225,.75);
opacity: 0;
visibility: hidden;
@include transition(opacity .6s ease-in-out);
&:target {
opacity: 1;
visibility: visible;
}
div {
position: absolute;
top: 50%;
width: 100%;
@include transform(translateY(-50%));
}
a {
position: absolute;
top: 20px;
right: 20px;
font: 300 12px/20px sans-serif;
color: white;
text-transform: lowercase;
text-decoration: none;
span {
font-size: 40px;
vertical-align: middle;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.