JSFiddle - React, Tailwind, and code Playground

by Iman Fakhar

HTML

<a class="icons"><img src="http://grad.xzn.ir/wordpress/wp-content/themes/grad%20tem2/images/shop.png"/><span>فروشگاه</span></a>

<a class="icons"><img src="http://grad.xzn.ir/wordpress/wp-content/themes/grad tem2/images/book.png" /><span>کتابخانه</span></a>

<a class="icons"><img src="http://grad.xzn.ir/wordpress/wp-content/themes/grad tem2/images/call.png" /><span>تماس</span></a>

<a class="icons"><img src="http://grad.xzn.ir/wordpress/wp-content/themes/grad tem2/images/email.png" /><span>ایمیل</span></a>

CSS

a.icons {
    overflow:hidden;
    display:inline-block;
    text-align:center;
    vertical-align:middle;
    line-height:100px;
    width:100px;
    height:100px;
    position:relative;
    margin-top:5px;
    margin-left:5px;
    -khtml-border-radius:100%;
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    border-radius:100%;
    border:2px #aaa solid;
}
a.icons img {
    display:block;
    width:50px;
    height:50px;
    padding:25px;
}
a.icons span {
    display:block;
    text-align:center;
    vertical-align:middle;
    line-height:100px;
    width:100px;
    height:100px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:24px;
    font-weight:bold;
    background:#CC99FF;
    position:relative;
}

JavaScript

$(document).ready(function () {
    $(".icons span").hide();
    $(".icons").hover(

    function () {
        $(this).find("img").slideUp(500).fadeOut(500).next("span").slideDown(500);
    },

    function () {
        $(this).find("img").delay(500).fadeIn(500).next("span").slideUp(500);
    });
})