JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#a" class="modal" id="a" data-title="Example A" tabindex="1"></a>
<a href="#b" class="modal" id="b" data-title="Example B" tabindex="2"></a>
<a href="#c" class="modal" id="c" data-title="Example C" tabindex="3"></a>
<a href="#close" id="close" data-title="close" accesskey="x">Press x to Close</a>

CSS

.modal{
 outline:none;
 text-decoration:none;
 width:128px;
 height:128px;
 display:inline-block;
 background:hsla(0,0%,0%,1) url() no-repeat 50% 50%;
 background-size:cover;
}
.modal:after{
 content:attr(data-title);
 background: hsla(0,0%,0%,1) url() no-repeat 50% 50%;
 background-size:contain;
 display:block;
 position:fixed;
 width:100%;
 height:100%;
 left:50%;
 top:50%;
 -webkit-transition:all 600ms ease 0ms;
 -webkit-transform:translateX(-50%) translateY(-50%) scale(0); /*-250%*/
 opacity:0;
 /*border-radius:16px;
 border:8px solid hsla(0,0%,0%,1);*/
 box-shadow:inset 0 -8px 16px 0 hsla(0,0%,0%,.5),0 8px 16px 0 hsla(0,0%,0%,.5);
 color:white;
 text-align:center;
 line-height:24px;
 font-size:18px;
 font-family:arial;
}
.modal:focus:after{
 -webkit-transition:all 300ms ease 600ms;
 -webkit-transform:translateX(-50%) translateY(-50%) scale(1);
 opacity:1;
}
#close{
 position:fixed;
 top:64px;
 right:64px;
 line-height:48px;
 font-size:16px;
 padding:0 16px;
 border-radius:32px;
 outline:none;
 text-decoration:none;
 background-color:hsla(0,0%,0%,1);
 color:white;
 opacity:1;
 -webkit-transition:all 300ms ease 600ms;
 -webkit-transform:translateX(0px) translateY(0px) scale(1);
}
#close:focus,#close:target{
 opacity:1;
 -webkit-transition:all 300ms ease 0ms;
 -webkit-transform:translateX(0px) translateY(0px) scale(0);
}
#a:after,#a{
 background-image:url(http://www.placekitten.com/500/300);
}
#b:after,#b{
 background-image:url(http://www.placekitten.com/400/300);
}
#c:after,#c{
 background-image:url(http://www.placekitten.com/300/500);
}