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

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

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

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