<div class="pop">
    <p>I can really go anywhere, in fact, I can be in the middle of a <label for="3" class="open">CLICK ME!</label> sentence. I work because my <b>for</b> matches my buddy's <b>id</b>. My buddy's name is <b>checkbox</b>. And as long as my buddy is right before <b>.modal</b>, everything works and everyone is happy.</p>
    <input type="checkbox" id="3" />
    <div class="modal">
      <div class="modal__inner">
        <p>Born 'n bred CSS. I have no JS in my genes, I promise!</p>
        <label for="3"></label>
      </div>
    </div>
	</div>
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

* {
box-sizing: border-box;
}
html {
  font-family: 'Fjalla One',sans-serif;
  font-size: 24px;
  margin: 0;
  background: lighten(black, 20%);
  color: white;
}
p {
  line-height: 175%;
}
b {
  color: paleturquoise;
}
.pop {
  position: absolute;
  width: 50%;
  margin: auto;
  padding: 20px;
  height: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  @media( max-width: 640px ){
			position: relative;
      width: 100%;
	}
	.modal {
		z-index: 2;
		opacity: 0;
		visibility: hidden;
    position: fixed;
    width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: opacity 500ms ease-in-out;
		&__inner {
		  transform: translate(-50%, -50%) scale(.75);
	    top: 50%;
	    left: 50%;
			width: 50%;
	    background: white;
	    padding: 30px;
			position: absolute;
      color: black;
			@media( max-width: 640px ){
				width: 100%;
			}
		}
	}
	label {
		display: inline-block;
		cursor: pointer;
		&.open {
      color: turquoise;
	    transition: color 200ms ease-in-out;
      text-decoration: underline;
			&:hover {
				color: paleturquoise;
			}
		}
	}
	input {
		display: none;
		&:checked {
			+ .modal {
				opacity: 1;
				visibility: visible;
				.modal__inner {
	        transform: translate(-50%, -50%) scale(1);
			    transition: all 200ms ease-in-out;
          p {
            font-size: 1.25rem;
            line-height: 125%;
          }
				}
				label {
					position: absolute;
					top: 0;
					right: 0;
					height: 30px;
					width: 30px;
					background: lighten(black, 40%);
			    transition: all 200ms ease-in-out;
					&:hover {
						background: lighten(black, 20%);
					}
				}
			}
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.