CodePen

HTML

            
              <label for="foo1">Show Image 1</label>
<input id="foo1">
<div class="modal">
    <img src="http://distilleryimage11.s3.amazonaws.com/f487926832f411e2b19622000a1f9d89_7.jpg">
</div>

<label for="foo2">Show Image 2</label>
<input id="foo2">
<div class="modal">
    <img src="http://distilleryimage9.s3.amazonaws.com/0dc8f56c263b11e29ade22000a1f9bd0_7.jpg">
</div>
​
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
    background-color: #ddd;
    font: 100%/1.5 sans-serif;
    padding: 3em;
}
label {
    background: #fff;
    border: .25em solid #666;
    color: #666;
    cursor: pointer;
    display: inline-block;
    padding: .75em 1.5em;
    text-transform: uppercase;
    vertical-align: top;
}
label:hover,
label:focus {
    background-color: #fffaaa;
}
input {
    background-color: transparent;
    border-color: transparent;
    height: 0;
    outline: 0;
    position: absolute;
    width: 0;
}
input:focus + .modal {
    display: inline-block;
    vertical-align: top;
}
.modal {
    background: hsla(0,0%,0%,.5);
    bottom: 0;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
img {
    box-shadow: 0 .25em 1.5em hsla(0,0%,0%,.25);
    height: 300px;
    left: 50%;
    margin: -150px;
    position: absolute;
    top: 50%;
    width: 300px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Works in IE 8
    
// No interaction with image, as then the focus is lost, but perfect for actionless modals!
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................