JSFiddle - React, Tailwind, and code Playground

HTML

<div tabindex="1" class="photo ph1"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph2"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph3"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph4"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph5"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph6"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph7"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph8"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph1"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph2"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph3"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph4"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph5"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph6"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph7"></div><div tabindex="1"></div>
<div tabindex="1" class="photo ph8"></div><div tabindex="1"></div>

CSS

.ph1 { 
    background-image: url(http://img6-fotki.yandex.net/get/5905/81684050.1c0/0_STATIC81a7e_1779fc83_L);
}
.ph2 { 
    background-image: url(http://img-fotki.yandex.ru/get/6103/55125778.98/0_6845d_4f954d67_L);
}
.ph3 { 
    background-image: url(http://img-fotki.yandex.ru/get/6103/74790899.2c/0_96b92_765328c6_L);
}
.ph4 { 
    background-image: url(http://img-fotki.yandex.ru/get/5906/75621533.2e/0_7b142_5acaff7d_L);
}
.ph5 { 
    background-image: url(http://img-fotki.yandex.ru/get/5905/24539504.35/0_79ff9_e7e2ac9f_L);
}
.ph6 { 
    background-image: url(http://img-fotki.yandex.ru/get/6104/48750062.16/0_751e4_8a377091_L);
}
.ph7 { 
    background-image: url(http://img-fotki.yandex.ru/get/5905/30222973.6/0_75755_c1576a81_L);
}
.ph8 { 
    background-image: url(http://img-fotki.yandex.ru/get/6102/28064393.0/0_7d831_875b0eca_L);
}
div { 
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: transparent;
    width: 130px;
    height: 150px;
    margin: 30px;
    border: 0;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    cursor: default;
    resize: none;
}
div:hover {
    cursor: pointer;
    }
div.photo + div { 
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
     width: 100%;
    min-height: 100%;
    left: -30px;
    top: -30px;
    padding-bottom: 300px;
    z-index: 2;
    cursor: pointer;
    }
div:focus {
    position: absolute;
    width: 50%;
    left: 25%;
    top: 15%;
    height: 600px;
    z-index: 10;
    cursor: default;
    border: 15px solid rgb(80, 80, 80);

}
div:focus + div {
    display: block;
}