JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div class="circle-wrapper"><div class="circle"></div></div>
<div class="layer"></div>

CSS

.circle {
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-radius: 180px;
    position:absolute;
    background: url(https://lh6.googleusercontent.com/-gZkNKkcs6NM/UX21rNCEYFI/AAAAAAAABNs/-0AVqmGlcMA/w1221-h555/20130410-DSC_0046.jpg) no-repeat center center fixed;
}
.circle-wrapper {
    width: 0;
    height: 0;
    border: 50px solid black;
    border-radius: 180px;
    position:absolute;
}
.layer { 
    display:none;
      background: url(https://lh6.googleusercontent.com/-gZkNKkcs6NM/UX21rNCEYFI/AAAAAAAABNs/-0AVqmGlcMA/w1221-h555/20130410-DSC_0046.jpg) no-repeat center center fixed;
    width:1000px;
    height: 500px;
    position:absolute;
}

JavaScript

$('.circle').on('click',function(){
$('.layer').show();
});

$('.layer').on('mouseout',function(){
$('.layer').hide();
});