How To Create Image Hover Overlay Effects 2 - CSS Image Hover Effects

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 Image Hover Overlay, đơn giản bằng CSS3 và HTML ai cũng có thể thực hiện được.

Lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat provident eveniet ipsum illo quibusdam facere, beatae, alias ducimus fugiat dolorum.

<div id="item-card">
    <div class="img-container">
        <img src="https://www.boldman.vn/wwwroot/templates/website/global/img/slide-image-on-hover.jpg" alt="">
    </div>
    <div class="text-container">
        <h3 class="">Lorem ipsum dolor.</h3>
        <div class="des">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat provident eveniet ipsum illo quibusdam facere, beatae, alias ducimus fugiat dolorum.</p>
        </div>
    </div>
</div>

#item-card {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.8);
            box-shadow: 0 5px 10px rgba(0,0,0,.8);
    .img-container {
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        background-color: rgba(0,0,0,0.9);
        img {
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            height: auto;
            width: 100%;
            max-width: inherit;
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
        }
    }
    .text-container {
        position: absolute;
        width: 100%;
        top:50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        z-index: 2;
        padding: 20px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        color: #fff;
        text-align: center;
        h3 {
            margin-bottom: 5px;
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
            -webkit-transform: translateY(-25px);
                -ms-transform: translateY(-25px);
                    transform: translateY(-25px);
            opacity: 0;
            visibility: hidden;
        }
        .des {
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
            -webkit-transform: translateY(25px);
                -ms-transform: translateY(25px);
                    transform: translateY(25px);
            opacity: 0;
            visibility: hidden;
        }
    }
    &:before,&:after {
        content: "";
        position: absolute;
        top:10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        z-index: 1;
        opacity: 0;
    }
    &:before {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: scaleX(0);
            -ms-transform: scaleX(0);
                transform: scaleX(0);
    }
    &:after {
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        -webkit-transform: scaleY(0);
            -ms-transform: scaleY(0);
                transform: scaleY(0);
    }
    &:hover {
        &:before {
            -webkit-transform: scaleX(1);
                -ms-transform: scaleX(1);
                    transform: scaleX(1);
            opacity: 1;
        }
        &:after {
            -webkit-transform: scaleY(1);
                -ms-transform: scaleY(1);
                    transform: scaleY(1);
            opacity: 1;
        }
        .img-container {
            img {
                opacity: .2;
                width: 110%;
            }
        }
        .text-container {
            h3,.des {
                opacity: 1;
                visibility: visible;
                -webkit-transform: translateY(0px);
                    -ms-transform: translateY(0px);
                        transform: translateY(0px);
                -webkit-transition-delay: .2s;
                     -o-transition-delay: .2s;
                        transition-delay: .2s;
            }
        }
    }
}

0 thảo luận về How To Create Image Hover Overlay Effects 2 - CSS Image Hover Effects

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