CSS User Profile Cards UI Design With COOL Image Hover Effects - HTML and CSS User Interface Design

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

Lorem ipsum dolor.

UX/UI Design
<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 class="img-inner">
            <a href=""><i class="demo-icon ecs-facebook"></i></a>
            <a href=""><i class="demo-icon ecs-twitter"></i></a>
            <a href=""><i class="demo-icon ecs-tumblr"></i></a>
            <a href=""><i class="demo-icon ecs-gplus"></i></a>
            <a href=""><i class="demo-icon ecs-youtube-play"></i></a>
        </div>
    </div>

    <div class="text-container">
        <h3>Lorem ipsum dolor.</h3>
        <div class="des">
            UX/UI Design
        </div>
    </div>
</div>

#item-card {
    position: relative;
    width: 300px;
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #fff;
    -webkit-box-shadow: 0 5px 20px rgba(0,0,0,.3);
            box-shadow: 0 5px 20px rgba(0,0,0,.3);
    .img-container {
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        z-index: 2;
        background-color: #262626;
        img {
            position: absolute;
            top: 0%;
            left: 50%;
            -ms-transform: translate(-50%,0%);
            -webkit-transform: translate(-50%,0%);
            transform: translate(-50%,0%);
            height: 100%;
            width: auto;
            max-width: inherit;
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
        }
        .img-inner {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            z-index: 3;
            a {
                display: block;
                width: 40px;
                height: 40px;
                text-align: center;
                color: #262626;
                border-radius: 100%;
                background-color: #fff;
                margin: 0 5px;
                -webkit-transition: .5s;
                -o-transition: .5s;
                transition: .5s;
                -webkit-transform: translateY(180px);
                    -ms-transform: translateY(180px);
                        transform: translateY(180px);
                opacity: 0;
                i {
                    display: block;
                    -webkit-transition: .5s;
                    -o-transition: .5s;
                    transition: .5s;
                    font-size: 16px;
                    line-height: 40px;
                }
            }
        }
    }
    .text-container {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #fff;
        z-index: 1;
        width: 100%;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 10px;
        text-align: center;
        h3 {
            font-weight: bold;
        }
        .des {
            color: #bbb;
        }
    }
    &:hover {
        .img-container {
            -webkit-transform: translateY(-69px);
                -ms-transform: translateY(-69px);
                    transform: translateY(-69px);
            img {
                opacity: .5;
            }
            .img-inner {
                a {
                    -webkit-transform: translateY(0);
                        -ms-transform: translateY(0);
                            transform: translateY(0);
                    opacity: 1;
                    &:nth-child(1) {
                        -webkit-transition-delay: 0s;
                             -o-transition-delay: 0s;
                                transition-delay: 0s;
                    }
                    &:nth-child(2) {
                        -webkit-transition-delay: 0.2s;
                             -o-transition-delay: 0.2s;
                                transition-delay: 0.2s;
                    }
                    &:nth-child(3) {
                        -webkit-transition-delay: 0.4s;
                             -o-transition-delay: 0.4s;
                                transition-delay: 0.4s;
                    }
                    &:nth-child(4) {
                        -webkit-transition-delay: 0.6s;
                             -o-transition-delay: 0.6s;
                                transition-delay: 0.6s;
                    }
                    &:nth-child(5) {
                        -webkit-transition-delay: 0.8s;
                             -o-transition-delay: 0.8s;
                                transition-delay: 0.8s;
                    }
                    &:hover {
                        i {
                           -webkit-transform: rotateY(360deg);
                                   transform: rotateY(360deg); 
                        }
                    }
                }
            }
        }
    }
}

0 thảo luận về CSS User Profile Cards UI Design With COOL Image Hover Effects - HTML and CSS User Interface Design

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