JSFiddle - React, Tailwind, and code Playground

by gababa

HTML

<div>

<div id="cover"></div>

 <div class="grid-container">
  <div class="grid-item" id="grid-item-1">1</div>
  <div class="grid-item" id="grid-item-2">2</div>
  <div class="grid-item" id="grid-item-3">3</div>
  <div class="grid-item" id="grid-item-4">4</div>
  <div class="grid-item" id="grid-item-5">5</div>
  <div class="grid-item" id="grid-item-6">6</div>
  <div class="grid-item" id="grid-item-7">7</div>
  <div class="grid-item" id="grid-item-8">8</div>
  <div class="grid-item" id="grid-item-9">9</div>
</div> 

</div>

<span>background-color result:</span>
<span id="result"></span>

CSS

#cover, .grid-container {
width: 100%;
height: 80%;
position: absolute;
top: 0;
}
#cover {
z-index: 2;
background-image: url('https://www.gstatic.com/webp/gallery/4.sm.jpg');
background-size: cover;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.grid-item {
  padding: 20px;
  font-size: 40px;
  text-align: center;
}
#grid-item-1 { background-color: #00061e; }
#grid-item-2 { background-color: #394266; }
#grid-item-3 { background-color: #61a7d3; }
#grid-item-4 { background-color: #db2f1c; }
#grid-item-5 { background-color: #8b8f91; }
#grid-item-6 { background-color: #ce171d; }
#grid-item-7 { background-color: #92ed5a; }
#grid-item-8 { background-color: #db25db; }
#grid-item-9 { background-color: #fcf00b; }
span { 
position:absolute;
top:85%;
}
#result {
 width:50px;
 height:50px;
 left:200px;
}

JavaScript

var posX, posY;
$("#cover").click(function(e){
//get cursor coordinates
posX = e.pageX;
posY = e.pageY;
//push cover image to the back of the view
$(this).css("z-index",-1);
//simulate click with same coordinates on grid-container
document.elementFromPoint(posX, posY).click();
//switch cover image back to the front of the view
$(this).css("z-index",2);

});
//get bgColor and use it
$(".grid-item").click(function(){
var bgColor = $(this).css("background-color");
//use bgColor as you like
$("#result").css("background-color",bgColor);
})