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;
        }
    }
}

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

RebfFrigo - 6 giờ trước

generic cialis 20mg tablets http://rcialisgl.com/ cialis professional ingredients

BbshMank - 14 giờ trước

cheapest viagra prices http://loxviagra.com/ viagra and nitroglycerin

Fmrfweano - 1 ngày trước

buy cialis by paypal https://cialisee.com/ cialis\'

Jebgweano - 2 ngày trước

cheap drugs online [url=http://pharmacylo.com/ ]humana online pharmacy[/url] Inderal

Gtnbrerve - 2 ngày trước

alternatives to viagra https://jokviagra.com/ how to get viagra

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