JSFiddle - React, Tailwind, and code Playground

by XGundam05

HTML

<table border=0 cellPadding=2 cellSpacing=5 width=100% class=showlangs>
    <tr>
        <td class="lang">
            <img src="http://lorempixel.com/200/40" alt="Arabic"/>
        </td>
        <td class="lang">
            <img src="http://lorempixel.com/200/40" alt="Khmer" />
        </td>
    </tr>
</table>

CSS

.hidden{
    display: none;
}
td{
    position: relative;
    width: 50%;
    max-width: 50%;
    overflow: hidden;
}
td span{
    position: absolute; 
    left: 0;
    top: 0;
}

JavaScript

$(document).on('mouseenter', '.lang', function(event){
    var _img = $(this).find('img');
    var _lang = $(_img).prop('alt');
    $(this).append('<span class="hidden"><strong>' + _lang + '</strong></span>');
    var _txt = $(this).find('span');
    $(_img).fadeOut();
    $(_txt).fadeIn();
});

$(document).on('mouseleave', '.lang', function(event){
    $(this).find('img').fadeIn();
    $(this).find('span').fadeOut(function(){
        $(this).remove();
    });
});