JSFiddle - React, Tailwind, and code Playground

by Dyaa Eldin Moustafa

HTML

<div class="homecircle">
    <div class="inner">
        <img src="http://loyaltylivewebsite.squarespace.com/storage/LL_icon_group.jpg">
         <h2><a href="as">كلام كتير</a></h2>

    </div>
</div>

CSS

.homecircle {
    border-radius:50%;
    background:#2f3291;
    width:300px;
    height:300px;
    -webkit-transition:all .25s ease-in-out;
    -moz-transition:all .25s ease-in-out;
    -o-transition:all .25s ease-in-out;
    transition:all .25s ease-in-out;
    cursor:pointer;
}
.homecircle:hover {
    background:#f5941e;
}
.homecircle .inner {
    padding:50px;
    color:white;
    text-align:center;
}
.homecircle .inner img {
    width:100px;
    position:relative;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}
.homecircle:hover .inner img {
    top:80px;
}
.homecircle .inner h2 a {
    text-decoration:none;
    color:white;
    position:relative;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}
.homecircle:hover .inner h2 a {
    top:-100px;
}

JavaScript

$(".homecircle").click(function () {
    window.location = $(this).find("a").attr("href");
    return false;
});