JSFiddle - React, Tailwind, and code Playground

by OwenMelbz

HTML

<div id="container">
<img src="http://www.numu.org.uk/resources/logos/5524/waveform_lotos.gif" />
</div>
<div id="debugzone"></div>

CSS

#container {
    position: relative;
    height:265px;
}
#container img{
    position:absolute;
    top:0;
    left:0;
}
#container .block {
    position:relative;
    z-index:99999;
    height:100%;
    width:1px;
    float:left;
}
#container .block:hover {
    background-color:lime
}

JavaScript

$(function(){
  
var wlength = $('#container').innerWidth();
var x = 0; 
    while (x < wlength){
        $('#container').append('<div class="block" id="block'+x+'"></div>');
        x++;   
    }
    
    
    $('.block').mouseover(function(){
        $('#debugzone').text($(this).attr('id')+ ' No Comments');        
    });
})