JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<div class="parent">
    <img src="https://avatars0.githubusercontent.com/u/6198891?s=460&v=4" id="imageid">
    <div class="hilight">
        Hi safwan hensem
    </div>
</div>


<br/>
<br/>
<br/>
<br/>
<br/>
<br/>hehwe

CSS

.parent{
  position: relative;
}

.hilight {
    background-color: rgba(0, 0, 0, 0.65);
    position: absolute;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    bottom: 0px;
    z-index: 1;
}

JavaScript

$(function() {
    
    resizeBox();
    
    $(window).resize(function() {
    	resizeBox();
    });
    
    function resizeBox() {
    		var height = $('img').css('height');
        var width = $('img').css('width');
        $('.hilight').css('height', height);
        $('.hilight').css('width', width);
    }
});