Hướng dẫn tạo hiệu ứng image hover transition css

CSS

 .cr-box:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: all 0.5s ease 0s;
}
.cr-box:hover:before{
    opacity: 1;
}
.cr-box{
    text-align: center;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.cr-box:after{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 110%;
    top: 0;
    transform: skewX(45deg);
    transition: all 1s ease 0s;
    background-color:rgba(255,255,255,0.5);
    z-index: 1;
}
.cr-box:hover:after{
    left: -110%;
    top: 0;
}
.cr-box img{
    width: 100%;
    height: auto;
}
.cr-box .box-content{
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    transition: all 0.5s ease 0s;
}
.cr-box:hover .box-content{
    bottom: 40%;
}
.cr-box .box-content .name{
    font-size:22px;
    font-weight: 700;
    margin: 0 0 10px;
    display: block;
    text-transform:uppercase;
    letter-spacing: 1px;
}
.cr-box .box-content .post{
    display: block;
    font-size: 15px;
    font-style: italic;
    font-weight: 600;
}

@media screen and (max-width:990px){
    .cr-box{
        margin-bottom: 30px !important;
    }
}

Body

<div class="cr-box">
  <img src="https://images.pexels.com/photos/698539/pexels-photo-698539.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
    <div class="box-content">
       <h3 class="name">Crystal</h3>
       <span class="post">Web Designer</span>
    </div>
</div>

 

Xem chi tiết

Viết một bình luận

THÔNG TIN THÊM

Quảng cáo

Nhận Mã Giảm Giá Hosting

Tư Vấn Dịch Vụ

Chào bạn! Bạn cần tư vấn hãy gửi tin nhắn nhé!