JSFiddle - React, Tailwind, and code Playground

HTML

<div class="kisi" id="2">
    <div id="sabitle2" class="sabitle">
        <span class="nick" id="nick2" >ErsnSrhat</span>

            <div class="avatar">
                <a href="http://www.google.com">
                    <img alt="ErsnSrhat" src="avatar.png">
                </a>
            </div>
        <span class="takip" id="buton2" style="display: none;"><img src="buton.png"></span>
    </div>
</div>

CSS

#kisiliste .kisi { 
float:left;
width:130px;
height:130px;
margin:10px 10px 35px 10px;
}

#kisiliste .kisi .sabitle {
text-align:center; z-index: -1;
box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
background: rgba(204, 204, 204, 0.8) url(/proje/dosyalar/kisi_sonuc_arka.png) repeat-x 0 100%;
padding:5px;
border-radius:4px;
position:relative;
}

#kisiliste .kisi .sabitle .nick {
display:none; 
left:10px; 
top:4px; 
position:absolute;
}

#kisiliste .kisi .sabitle .takip {
z-index:1; 
display:none;  
bottom:4px; 
left:10px; 
position:absolute;
}


#kisiliste .kisi .sabitle .avatar img {
border-radius:4px;
border:1px solid #ccc;
width:120px;
height:120px;
}

JavaScript

$(document).ready(function() {  
    $(".kisi").on("mouseenter",function(){
        $("#sabitle"+this.id).animate({
            top: "-20px",
            boxShadow: "0 0 6px rgba(0, 0, 0, 0.5)",
            padding: "25px 5px 35px 5px"
        }, 350 );
        $('#nick'+this.id).fadeIn(400);
        $('#buton'+this.id).fadeIn(400);             
    });
    $(".kisiliste<?=$sayfa?> .kisi").on("mouseleave",function(){
        $("#sabitle"+this.id).animate({
            top: "0px",
            boxShadow: "0 0 3px rgba(0, 0, 0, 0.5)",
            padding: "5px"
        }, 180 );
        $('#nick'+this.id).fadeOut(170); 
        $('#buton'+this.id).fadeOut(170);            
    });
});