JSFiddle - React, Tailwind, and code Playground

by subev

HTML

<div id="banner-roxo">
    <div id="roxo-um">
        <div class="image">
            <img src="http://www.d1digital.com.br/clientes/audiolab/wp-content/themes/d1Digital/images/roxo_1.png" height="181px" width="181px" border="0px" />
        </div>
        <div class="text">
            Imergimos na marca, seu universo e aspirações; extraímos os conceitos que definem a sua identidade sonora.
        </div>
    </div>
</div>

JavaScript

$('#banner-roxo .text').hide();

   $('#roxo-um').mouseenter(function() {
    $(this).find('.image').stop(true, true).hide("drop", {
        direction: "up"}, 1000).delay(1000)
        .parent().find('.text').stop(true, true).show("drop", { direction: "up"  }, 1000);
}).mouseleave(function() {
    $(this).find('.text').stop(true, true).hide("drop", {
        direction: "up"
    }, 1000).delay(1000).parent().find('.image').stop(true, true).show("drop", {
        direction: "up"
    }, 1000);
})