Dropping out a short description when hovering over a product card in the storefront how?

Question

MODX

Hello, please tell me how to implement this effect on modx https://www.ikea.com/ru/ru/catalog/categories/depa... like on tables, when hovering, a block with a description and a button drops out. Introtext is displayed, but it's just below the price, but I need to hide it and make it appear only when you hover the mouse. I understand that this is a hover, but I don’t understand how to write ((( In the div intro code, you need to display a different button .. please tell me who doesn’t mind.

<div class="row ms2_product">
    
    <form method="post" class="ms2_form">
        <a href="{$id | url}">
    {if $small}
        <div class="img_wrap"><img src="{$small}" alt="{$pagetitle}" title="{$pagetitle}"/></div>
    {elseif $image?}<div class="img_wrap"><img src="{'phpThumbOn' | snippet : ['input' => ($image), 'options' => 'wl=200&hp=200&hs=200']}" alt="{$pagetitle}" title="{$pagetitle}"/></div>
    {else}<div class="img_wrap"><img src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
             srcset="{'assets_url' | option}components/minishop2/img/web/[email protected] 2x"
             alt="{$pagetitle}" title="{$pagetitle}"/></div>
    {/if}
           
            <p>{$pagetitle}</p>
     </a>
            {if $introtext}
                    <div class="intro">
                        <small>{$introtext | truncate : 200}</small>
                    </div>
                {/if}
        <div class="price">
    {if $old_price>0}
                <span class="old">{$old_price} {'ms2_frontend_currency' | lexicon}</span>
                <span class="perc">{ceil((($price-$old_price)*100)/$old_price)}%</span>
                <span class="new">{$price} {'ms2_frontend_currency' | lexicon}</span>
    {else}
                <span class="current">{$price} {'ms2_frontend_currency' | lexicon}</span>
    {/if}
            </div>
        <button class="btn addcart" type="submit" name="ms2_action" value="cart/add"><i class="fa fa-shopping-cart"></i><span class="no-mobile">Купить со склада</span></button>
        <input type="hidden" name="id" value="{$id}">
        <input type="hidden" name="count" value="1">
        <input type="hidden" name="options" value="[]">
        <a class="msfavorites" data-click data-data-id="{$id}" data-data-list="default" data-msfavorites-mode="list">
          <i class="fas fa-align-left"></i><span class="msfavorites-text-load">секунду</span><span class="msfavorites-text-add no-mobile">В избранное</span>
          <span class="msfavorites-text-remove no-mobile">Удалить из списка</span>
    </a>
    <!--   -->
        <!--!addComparison?&list_id=`29`&id=`{$id}`-->
    </form>
</div>

Answer 1

Your task is not related to modx or any other cms. You can even not use jQuery and so on and so forth. It will be enough for you to look in the direction of css ... everything is implemented on it.
simple example. Should explain the gist - jsfiddle.net/w8rxj32m/26

Answer 2

I'm writing from my phone, so I can't look at the IKEA example, but I think you need to do something like this:
First, set the block with a brief description to display: none and probably also styles for positioning the element.
Then jQuery:
$(document).ready(function(){
$('element_selector_to_hover').hover(function(){
$('short description block selector').show();
}, function(){
$(' short_description_block_selector').hide();
});
});