How to set up animation?

Question

css

Hello, on the site there is a list of organizations, when you hover over the heading, the animation starts at the star rating below it. How to customize the animation of the current organization? (this)

function a() {

setTimeout(function() {
    $('.posthide a').eq(0).css({height:'100px','color':'#FFE34D'});
});

    setTimeout(function() {
        $('.posthide a').eq(1).css({'height':'10px','color':'#FFE34D'});
    }, 300);

    setTimeout(function() {
        $('.posthide a').eq(2).css({'height':'10px','color':'#FFE34D'});
    }, 600);

    setTimeout(function() {
        $('.posthide a').eq(3).css({'height':'10px','color':'#FFE34D'});
    }, 900);

    setTimeout(function() {
        $('.posthide a').eq(4).css({'height':'10px','color':'#FFE34D'});
    }, 1200);

    setTimeout(function() {
        $('.posthide a').css('border','');
        $('.posthide a').css('color','');
    }, 2000)

};

$('h3 a').hover(
    function () {
       a();
    }
);

Answer 1

on your screenshots of the layout and layout, different column widths are visual even. and being 4 columns just means they take up 25% of the width of the browser window. may not fit. what is your layout width? What about the width of your site in the browser? if there is more in the layout, then of course it will not fit, you need to check everything.

Answer 2

reduce the font) Better see what size it is in fsh.
https://chrome.google.com/webstore/detail/page-rul...
here is a utility to measure the distance with a ruler)

Answer 3

in css to .posthide aaddtransition: all ease 250ms;

Answer 4

There is css for this. We just use :hover. A similar example is in my other answer
https://toster.ru/answer?answer_id=883077