Tất cả bài viết | CSS3

Tìm hiểu cách sử dụng CSS3 Transitions để tạo hiệu ứng Hover

Trong bài học thiết kế web này các Bạn sẽ được Tìm hiểu cách sử dụng CSS3 Transitions để tạo hiệu ứng Hover

Bước 1: Tạo cấu trúc HTML

 
  
   
   Thời trang cho bé trai nhiều màu sắc ngộ nghĩnh 
                
                
                
                    
Mẫu thiết kế 1                    
Giá: 200.000 đ                
            
        
 
    
                
                
                
                    
Mẫu thiết kế 2                    
Giá: 200.000 đ                
            
        
 
    
                
                
                
                    
Mẫu thiết kế 3                    
Giá: 200.000 đ

Bước 2: Định dạng CSS

.box{    
position: relative;    
overflow: hidden;    
box-shadow: 0 0 5px #808080;
}

.box:before,.box:after{    
content: "";    
width: 0;    
height: 0;    
position: absolute;    
opacity: 0;    
z-index: 1;    
transition: all 0.5s ease 0s;
}

.box:before{    
bottom: 5%;    
left: 5%;    
border-bottom: 2px solid #fff;    
border-left: 2px solid #fff;
}

.box:after{    
top: 5%;    
right: 5%;    
border-top: 2px solid #fff;    
border-right: 2px solid #fff;
}

.box:hover:before,.box:hover:after{    
opacity: 1;    
width: 90%;    
height: 90%;
}

.box img{    
width: 100%;    
height: auto;    
transform: scale(1);    
transition: all 0.5s ease 0s;
}

.box:hover img{    
transform: scale(1.05);
}

.box .box-content{    
width: 100%;    
position: absolute;    
bottom: 10%;    
left: 10%;
}

.box .title,.box .post{    
display: block;    
font-size: 25px;    
color: #fff;    
line-height: 25px;    
margin: 0;    
position: absolute;    
bottom: 0;    
left: 0;    
opacity: 1;    
transition: all 0.5s ease 0s;
}

.box:hover .title,.box .post{    
opacity: 0;
}

.box:hover .post{    
opacity: 1;
}

@media only screen and (max-width: 990px){    
.box{ 
margin-bottom: 20px; 
}
}

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

Bước 3: Gọi thư viện Bootstrap và Font awesome

Bước 4: Gọi thư viện JQUERY

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất