.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>&times;</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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.