Content Box with Hover Effects - HTML CSS Creative Box Hover Effect Tutorial

Bài viết này mình sẽ giới thiệu tới các bạn một hiệu ứng liên quan tới Content Box with Hover, đơn giản bằng CSS3 và HTML ai cũng có thể thực hiện được.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, natus.

<div id="box">
    <div class="img-container">
        <i class="demo-icon ecs-facebook"></i>
    </div>
    <div class="text-container">
        <h3>Lorem ipsum dolor sit amet.</h3>
        <div class="des">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, natus.</p>
        </div>
    </div>
</div>

#box {
    width: 300px;
    height: 400px;
    background-color: #262626;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    .img-container {
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        background-color: #3b5999;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        z-index: 1;
        text-align: center;
        i {
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-size: 50px;
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
            color: #fff;
        }
    }
    .text-container {
        position: absolute;
        top:100%;
        width: 100%;
        height: 100%;
        text-align: center;
        padding: 15px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        color: #fff;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        opacity: 0;
        .des {
            margin-top: 10px;
        }
    }
    &:hover {
        .img-container {
            top: 15px;
            left:calc(50% - 25px);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            i {
                font-size: 30px;
            }
        }
        .text-container {
            top:65px;
            opacity: 1;
        }
    }
}

68 thảo luận về Content Box with Hover Effects - HTML CSS Creative Box Hover Effect Tutorial

weanoAni - 14/06/2021

victoza canadian pharmacy [url=https://pharmacyken.com/ ]ritalin canadian pharmacy[/url] walmart pharmacy canada

FrigoVed - 13/06/2021

how to get cialis without a doctor [url=https://krocialis.com/ ]fastest delivery of cialis[/url] buy tadalafil online

MankSwa - 10/06/2021

cialis 10 mg where to buy [url=https://ckacialis.com/ ]generic cialis from india[/url] cialis genetic

Frigoloh - 09/06/2021

which is better cialis or viagra? [url=https://rcialisgl.com/ ]viagra/cialis black and gold 800[/url] price of cialis in nz

weanoDev - 09/06/2021

how to report someone selling prescription drugs [url=https://cjepharmacy.com/ ]canadian online pharmacy cipa approved[/url] free online pharmacy technician practice test

Bài viết cùng chuyên mục