<label>
  <span>popupを表示</span>
  <input type="checkbox" name="checkbox">
<div id="popup"><img src="https://assets.techacademy.jp/public/logo.png" alt="TechAcademy" /></div>
</label>
#popup{
  width:30%;
  line-height:100px;
  background:#000;
  padding:0 4%;
  box-sizing:border-box;
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
img{
  width:100%;
}
label{
  display:block;
}
label span{
  display:block;
  background-color:#01b6ed;
  color:#fff;
  width:200px;
  line-height:40px;
  border-radius:4px;
  text-align:center;
}
label span:hover{
  cursor:pointer;
}
input[type="checkbox"]{
  display:none;
}

input[type="checkbox"]:checked + #popup{
  display:block;
  transition:.2s;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.