Hiệu ứng hover div load text lên

 

**** HTML

<div class="hover-box-2">

    <span class="default-text">141.001 VNĐ</span>

    <span class="hover-text">Xem Đơn hàng</span>

</div>

**** CSS

.hover-box-2 {

    position: relative;

    overflow: hidden;

    /* width: 240px; */

    width: 180px;

    height: 50px;

    background: linear-gradient(135deg, #ffe4ec, #fff0f5);

    border-radius: 12px;

    text-align: center;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    margin: 0 auto;

    transition: transform 0.3s ease;

}

.hover-box-2:hover {

    transform: scale(1.03);

}

.hover-box-2 .default-text {

    top: 0;

    color: #444;

    opacity: 1;

}

.hover-box-2:hover .default-text {

    top: -100%;

    opacity: 0;

}

.hover-box-2 .hover-text {

    top: 100%;

    color: #e91e63;

    opacity: 0;

}

.hover-box-2:hover .hover-text {

    top: 0;

    opacity: 1;

}

.hover-box-2 .default-text, .hover-box-2 .hover-text {

    position: absolute;

    width: 100%;

    left: 0;

    transition: all 0.4s ease-in-out;

    line-height: 50px;

    font-size: 18px;

    font-weight: 600;

}

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;

}

Hover Css: hiện chữ đẹp khi hover

 

**** HTML:

<div class="cases-pic posR">

<a href="#" class="case-link">

<img src="link__hinhanh">

<p>View</p>

</a>

</div>

**** CSS:

p:not(.has-background):last-of-type {

    padding-bottom: 0;

}

a.case-link p {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    text-align: center;

    display: grid;

    align-content: center;

    z-index: 999999;

    color: white;

    text-transform: uppercase;

    font-size: 18px !important;

    letter-spacing: 5px !important;

    top: -10px;

    opacity: 0;

}

a.case-link p {

    transition: .15s ease-in-out !important;

}

a.case-link:hover p {

    top: 0;

    opacity: 1;

}

hover div - mua hàng

 

**** HTML

<div class="global-spdesk">

    <div class="col-md-3 posR">

        <div class="allsp-pic"> <img src=""> </div>

        <div class="home-sua-title">Tiêu đề</div>

        <div class="muangaysp">
            <a href="#">Thêm nhanh vào gỏi hàng </a>
        </div>

    </div>

</div>

**** CSS

.global-spdesk .col-md-3:hover .muangaysp {

    opacity: 1;

    pointer-events: visible;

    visibility: visible;

    transform: translateZ(0);

}

.muangaysp {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 15px;

    opacity: 0;

    pointer-events: none;

    visibility: visible;

    transform: translate3d(0,20px,0);

    transition: all .3s;

    z-index: 1;

}

.muangaysp a {

    width: 100%;

    background-color: #fff;

    color: #000;

    border: 0;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    height: 40px;

    border-radius: 16px;

    border: 2px solid #000;

    background-color: #000;

    color: #fff;

    padding: 0 30px;

    transition: all .2s;

    cursor: pointer;

}

Hover menu css

 

**** HTML:

<div class="head-menu">

    <ul>

        <li>

            <a href="javascript:void(0)">Home page</a>

        </li>

    </ul>

</div>

**** CSS: 

.head-menu > ul > li > a {

    position: relative;

    padding: 7px 12px;

    font-size: 12px;

    line-height: 1;

    color: #fff;

    z-index: 1;

    font-weight: 600;

    transition: padding .2s ease-in-out,transform .2s ease-in-out;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    font-family: inherit;

}

.head-menu > ul > li > a:before {

    content: "";

    opacity: 0;

    position: absolute;

    border-radius: 2px;

    height: 14px;

    width: 100%;

    top: 50%;

    left: 0;

    background-color: #cd2122;

    transform: translateY(-50%);

    transition: height .2s ease-in-out;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    z-index: -1;

}

.head-menu > ul > li > a:hover:before{

    background: #ad172b;

    height: 31px;

    opacity: 1;

}