transition effect not working

Vote count: 0

I am trying to get button visibility with animated effect using CSS transition effect on hover but the effect not working.

I am unable to find my mistakes, can anybody help me to solve my issue.

My HTML & CSS Code is as under.

.prodiv3
{
        background-color:#d79e37;
        position:relative;
        z-index:999;
}
.product-box a
{
        text-decoration:none;
}
.prodiv3 h2
{
        padding:0px !important;
        margin: 0px !important;
        color: #fff;
        padding-left:15px !important;
}
.prodiv3 p
{
        color: #000000;
        padding-left:15px !important;
}
.link-icon
{
        position:relative; 
        bottom:120px; 
        left:10px;
        visibility:hidden;
        width:60px; 
        height:60px; 
        background:url(../images/link-icon.png) no-repeat center center #ff411c; 
        //display:block; 
        border-radius:100%;
}
.product-box a:hover .link-icon
{
        visibility:visible;
        -moz-transition: all 1s ease-in !important;
        -webkit-transition: all 1s ease-in !important;
        -o-transition: all 1s ease-in !important;
        transition: all 1s ease-in !important;
}

asked 25 secs ago

Khetaram

Let's block ads! (Why?)

transition effect not working