Hover Css

 

**** HTML

<div class="home-shop-pic positionR">
<a href="#">
<img src="anh.jpg ">

<div class="box-thumb-hover"></div>
</a>

<div class="nutmuahang">
<span class="buy-fast" data-pid="3" data-soluong="1">
<i class="fa fa-shopping-basket" aria-hidden="true"></i>&nbsp;
Mua hàng
</span>
</div>
</div>

**** CSS

.home-shop-pic {

    height: 213px;

    width: 100%;

    border: #eee solid 1px;

    border-radius: 5px;

    position:relative;

}

.box-thumb-hover {

    width: 100%;

    height: 100%;

    background-position: -265px 0;

    background-repeat: no-repeat;

    position: absolute;

    left: 0;

    top: 0;

}

.home-shop-pic:hover {

    opacity: 0.8;

    filter: alpha(opacity=80);

}

.box-thumb-hover {

    width: 100%;

    height: 100%;

    background-position: -265px 0;

    background-repeat: no-repeat;

    position: absolute;

    left: 0;

    top: 0;

}

div.box-thumb-hover:hover {

    background: url(glass.png) no-repeat scroll 265px 0 transparent;

    transition: all 1.2s ease-in-out 0s;

    -moz-transition: all 1.2s ease-in-out 0s;

    -webkit-transition: all 1.2s ease-in-out 0s;

    -webkit-font-smoothing: antialiased;

    cursor: pointer;

}

.nutmuahang span {

    background: #3567d7 !important;

    color: #fff !important;

    padding: 10px 15px !important;

    border-radius: 5px;

    position: absolute;

    top: 25%;

    left: 120px;

    width: 120px;

    transition: all .5s ease;

    opacity: 0;

    cursor: pointer;

}

.home-shop-pic:hover .nutmuahang span {

    left: calc(50% - 60px)!important;

    opacity: 1;

}