Thứ Sáu, 14 tháng 9, 2018

hover ảnh css

**** HTML:
<div class="box-thumb">
<a href="#">
<img width="233" height="170" src="hinh-anh.jpg">
<div class="box-thumb-hover"></div>
</a>
</div>
**** CSS:
.box-thumb{
    position: relative;
    display: block;
}
.product_box img {
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 5px 0 5px 0;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px 5px 0 0;
}
.box-thumb-hover {
    width: 100%;
    height: 100%;
    /*background-image: url(../images/glass.png);*/
    background-position: -265px 0;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
}
div.box-thumb-hover:hover {
    background: url(../images/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;

}


Không có nhận xét nào:

Đăng nhận xét