JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<ul>
    <li>
	    <a href="" style="background: url('http://s3.uploads.ru/93rm6.png') no-repeat 50% 50%;">
		    <span style="padding: 3px 5px;">Оборудование</span>
	    </a>
    </li>
    <li>
	    <a href="" style="background: url('http://s3.uploads.ru/93rm6.png') no-repeat 50% 50%;">
		    <span style="padding: 3px 5px;">Оборудование</span>
	    </a>
    </li>
</ul>

CSS

body{
      background:#cccccc;  
}
ul {
    position: relative;
    width: 1010px;
}
ul li a {
    border: 10px solid #FFFFFF;
    border-radius: 0 57px 57px 57px;
    box-shadow: 0 3px 20px 3px #000000 inset;
    display: block;
    height: 165px;
    left: 5px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    top: 5px;
    width: 194px;
}
li {
    display: table-cell;
    float: left;
    height: 195px;
    margin: 5px 15px;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 224px;
}
li span {
    background: none repeat scroll 0 0 #AFDAFB;
    color: #142C52;
    display: block;
    left: 0;
    opacity: 0.9;
    position: relative;
    text-align: center;
    top: 118px;
    width:194px;
}

JavaScript

$("ul li").hover(function () {
    $(this).find("a").css({"box-shadow": "none"});
    $(this).find("a").animate({height:"175px",width:"204px",left:"0px",top:"0px"},200);
    $(this).find("span").animate({top:"123px"},200); 

} ,
function () {
$(this).find("a").css({"box-shadow": "inset 0px 3px 20px 3px #000000"}); $(this).find("a").animate({width:"194px",height:"165px",left:"5px",top:"5px"},200);
$(this).find("span").animate({top:"118px"},200); 

}
);