<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.