CSS Searchlight

Nice searchlight effect using CSS and a few lines of JavaScript.

HTML

<link rel="stylesheet" href="http://sandywalker.github.io/webui-popover/dist/jquery.webui-popover.min.css">
<script src="http://sandywalker.github.io/webui-popover/dist/jquery.webui-popover.min.js"></script>
<div class="canvas">

</div>
<div class="searchlight"></div>

CSS

html {
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

.canvas {
    width: 100%;
    height: 100%;
    background: url("https://files.slack.com/files-pri/T04MCF2QC-F9CDNHQ0M/image.png");
    background-size: cover;
}

.hotspot {
    position: absolute;
    display: block;
    z-index: 1000;
    width: 1vw;
    height: 1vw;
    border-radius: 50%;
    background-color: blue;
}
.hotspot.main {
    width: 1.5vw;
    height: 1.5vw;
    background-color: red;
    animation: blink 1s step-end infinite;
    -webkit-animation: blink 1s step-end infinite;
}

@keyframes blink {
	0%  { opacity: 1; }
	50% { opacity: 0.001; }
}
@-webkit-keyframes blink {
	0%  { opacity: 1; }
	50% { opacity: 0.001; }
}

.hotspot a {
    display: block;
    width: 100%;
    height: 100%;
}


.searchlight {
    position: absolute;
    z-index: 100;
    height: 300px;
    width: 300px;
    border-width: 100vh 100vw;
    border-style: solid;
    border-color: #000;
    top: -100vh;
    left: -100vw;
    /*cursor: none;*/
    background: #000;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -ms-box-sizing: content-box;
    box-sizing: content-box;
}
.searchlight.on {
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%); /* FF3.6+ */
    background: -webkit-radial-gradient(ellipse, center cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* W3C */
}

JavaScript

$('.searchlight')
    .on('mousemove', function(event) {
        $(this).addClass('on').css({'margin-left': event.pageX - 150, 'margin-top': event.pageY - 150});
    })
    .on('mouseout', function(event) {
        if (!event.relatedTarget) $(this).removeClass('on');
    })
    .on('click', function() {
        $(this).fadeOut(function() {
            $(this).remove();
            $('.hotspot > a').show();
        });
    })
;

var settings = {
    trigger:'hover',
    width:300,						
    multi:false,
    closeable:false,
    padding:true
};

$('.hotspot > a').each(function() {
    var hs_settings = settings;
    hs_settings.title = $(this).attr('title');
    hs_settings.content = $('#' + $(this).parent().attr('id') + '-content').html();
    $(this).webuiPopover(hs_settings);
});