KIGIMEX - Hover ảnh đẹp

 

**** HTML

<div class="show-chosenparent">

    <div class="col">

        <div class="product">

            <div class="img">

                <a href="/Ca-com-an-lien-250g">

                    <img src="/uploads/shop/pic/6 Cá cơm ăn liền 250g.jpg" alt="">

                </a>

            </div>

            <div class="tend">

                <h3>

                    <a href="/Ca-com-an-lien-250g">Cá cơm ăn liền 250g</a>

                </h3>

            </div>

        </div>

    </div>

</div>

**** CSS

.show-chosenparent {

    margin-bottom: 25px;

}

.show-chosenparent:after {

    content: "";

    display: block;

    clear: both;

}

.show-chosenparent .col {

    width: 25%;

    float: left;

    border: solid 1px #dddddd;

    margin: -1px 0px 0px -1px;

    padding: 0;

}

.col .product {

    padding: 5px 15px 15px 15px;

    background: #ffffff;

    position: relative;

    overflow: hidden;

    -webkit-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    transition: all 0.5s ease;

    z-index: 1;

}

.col .product::before {

    content: "";

    position: absolute;

    top: 0px;

    bottom: 0px;

    left: 50%;

    right: 50%;

    border-top: solid 1px #086db5;

    border-bottom: solid 1px #086db5;

    -webkit-transition: all 0.5s linear;

    -o-transition: all 0.5s linear;

    transition: all 0.5s linear;

    pointer-events: none;

    z-index: 1;

}

.col .product::after {

    content: "";

    position: absolute;

    left: 0px;

    right: 0px;

    top: 50%;

    bottom: 50%;

    border-left: solid 1px #086db5;

    border-right: solid 1px #086db5;

    -webkit-transition: all 0.5s linear;

    -o-transition: all 0.5s linear;

    transition: all 0.5s linear;

    pointer-events: none;

    z-index: 1;

}

.product .img {

    padding-top: 100%;

    position: relative;

    overflow: hidden;

    margin-bottom: 0px;

    -webkit-transition: all 1s linear;

    -o-transition: all 1s linear;

    transition: all 1s linear;

}

.product .img img {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%,-50%);

    -o-transform: translate(-50%,-50%);

    transform: translate(-50%, -50%);

    max-width: 90%;

    max-height: 100%;

    /* width: 100%; */

    -webkit-transition: all 0.5s ease;

    -o-transition: all 0.5s ease;

    transition: all 0.5s ease;

}

.col .product:hover::before {

    left: 0px;

    right: 0px;

}

.col .product:hover::after {

    top: 0px;

    bottom: 0px;

}

.product:hover .img {

    transform: scale(1.05);

    -webkit-transition: all 1s linear;

    -o-transition: all 1s linear;

    transition: all 1s linear;

}