spotlight modal

spotlight modal via css and javascript

by Sergey Denisov

HTML

<div tabindex="1" class="spacetype">arun</div>
<div tabindex="2" class="spacetype">ajesh</div>
<div tabindex="3" class="spacetype">amit</div>
<div id="cloak"></div>

CSS

body {
    background-image: url('http://placekitten.com/1024/678');
}
.spacetype {
    display: inline-block;
    position: relative;
    height: 100px;
    width: 75px;
    border: 1px solid black;
    padding: 10px;
    background-color: rgba(244, 250, 54, 0.6);
    margin: 5px;
    font-weight: bold;
    border-radius: 7px;
    font-family: Arial;
}

.spacetype:focus {
    outline: 0;
    z-index: 10;
    background-color: rgba(244, 250, 54, 0.8);
}

.spacetype:focus:after {
    position: absolute;
    content: '';
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border: 3px solid yellow;
    border-radius: 7px;
}

.spacetype:focus ~ #cloak {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0,0,0, 0.3);
    padding: 0;
    z-index: 0;
    pointer-events: none;
}