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;

}

Hiệu ứng hover ảnh

 

**** HTML:

<div class="pdnews-pic">

    <img src="anh.jpg">

</div>

**** CSS:

.pdnews-pic {

    width: 100%;

    height: 260px;

    overflow: hidden;

    position: relative;

}

.pdnews-pic::before {

    content: "";

    position: absolute;

    top: 25px;

    bottom: 25px;

    left: 50%;

    right: 50%;

    border-top: solid 1px #ffffff;

    border-bottom: solid 1px #ffffff;

    -webkit-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    pointer-events: none;

    z-index: 1;

}

.pdnews-pic::after {

    content: "";

    position: absolute;

    left: 20px;

    right: 20px;

    top: 50%;

    bottom: 50%;

    border-left: solid 1px #ffffff;

    border-right: solid 1px #ffffff;

    -webkit-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    pointer-events: none;

    z-index: 1;

}

.pdnews-pic:hover::before {

    left: 15px;

    right: 15px;

}

.pdnews-pic:hover::after {

    top: 20px;

    bottom: 20px;

}

Css hover ảnh đẹp

 

.homecat-pic {

    height: 150px;

    width: 100%;

    transition: all 0.3s ease-out;

    --deg: 100deg;

}

.homecat-pic img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 20px;

}

.homecat-pic:hover img {

    animation: tada 2s infinite;

    filter: brightness(1.05);

}

@keyframes tada {

  0% {

    transform: scaleX(1); }

  10%,

  20% {

    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); }

  30%,

  50%,

  70%,

  90% {

    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); }

  40%,

  60%,

  80% {

    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); }

  to {

    transform: scaleX(1); } }

Hover Image

 

**** CSS:

.inside-news-pic {

    overflow: hidden;

    position: relative;

    height: 250px;

    border: 1px solid #ccc;

    width: 100%;

}

.inside-news-pic a img {

    transition: all 0.3s ease-out;

    height: 100%;

    width: 100%;

    object-fit: cover;

}

.inside-news-pic a:hover img {

    transform: scale(1.2);

}