JSFiddle - React, Tailwind, and code Playground

by harianus

HTML

<div class="image-overlay">
    <img src="http://placehold.it/100/ee22dd/ffffff" alt="" />
    <img src="http://placehold.it/500/ff9900/ffffff" alt="" style="display: none;" />
</div>

<hr />

<div class="image-overlay">
    <img src="http://placehold.it/150/ee22dd/ffffff" alt="" />
    <img src="http://placehold.it/50/ff9900/ffffff" alt="" style="display: none;" />
</div>

CSS

div.image-overlay {
    display: inline-block;
    position: relative;
}

JavaScript

$(document).ready(function () {
      
    
    // function like this:
    // $(".image-overlay").adriaan({url: 'http://placehold.it/50/ff9900/ffffff'});
    
    // or like this:
    // $(".image-overlay-data").adriaan();
    
    $(".image-overlay").each(function() {
        console.log($(this));
        
        var widthFirst  = $(this).find('img').first().width();
        var heightFirst = $(this).find('img').first().height();
        
        $(this).find('img').last().css('max-width', widthFirst + 'px');
        $(this).find('img').last().css('max-height', heightFirst + 'px');
        
        var widthLast  = $(this).find('img').last().width();
        var heightLast = $(this).find('img').last().height();
        
        $(this).find('img').last().css('position', 'absolute');
        $(this).find('img').last().css('top', (heightFirst / 2 - heightLast / 2) + 'px');
        $(this).find('img').last().css('left', (widthFirst / 2 - widthLast / 2) + 'px');
    });
                    
    $(".image-overlay").mouseenter(function () {        
        $(this).find('img').last().show();
    }).mouseleave(function () {
        $(this).find('img').last().hide();
    });
});