CSS Slide Text Over Image - CSS Image Hover Effects Using Bootstrap - Pure CSS3 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 Slide Text Over Image, đơ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. Maiores, eos.

Read more
<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>Lorem ipsum dolor.</h3>
        <div class="des">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eos.</p>
        </div>
        <a href="javascript" class="">Read more</a>
    </div>
</div>

#item-card {
    position: relative;
    overflow:hidden;
    border-radius: 10px;
    background-color: #000;
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    height: 400px;
    width: 300px;
    .img-container {
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;
        img {
            position: absolute;
            top: 0%;
            left: 50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
            width: auto;
            height: calc(100% + 40px);
            max-width: inherit;
            -webkit-transition: .5s;-o-transition: .5s;transition: .5s;
        }
    }
    .text-container {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 20px 20px 0 20px;
        box-sizing: border-box;
        color: #fff;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: .5s;-o-transition: .5s;transition: .5s;
        h3 {
            font-weight: bold;
        }
        .des {
            margin-top: 5px;
            text-align: justify;
        }
        a {
            margin-top: 10px;
            padding: 6px 12px;
            display: inline-block;
            border:none;
            color: #fff;
            text-transform: uppercase;
            background-color: #e24d26;
            &:hover {
                background-color: #fff;
                color: #e24d26;
            }
        }

    }
    &:hover {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
        -webkit-box-shadow: 0 50px 50px rgba(0,0,0,0.5);
                box-shadow: 0 50px 50px rgba(0,0,0,0.5);
        .img-container {
            img {
                opacity: 0.5;
                -webkit-transform: translate(-50%,-40px);
                -ms-transform: translate(-50%,-40px);
                transform: translate(-50%,-40px);
            }
        }
        .text-container {
            opacity: 1;
            visibility: visible;
            bottom: 20px;
        }
    }
}

0 thảo luận về CSS Slide Text Over Image - CSS Image Hover Effects Using Bootstrap - Pure CSS3 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