Tất cả bài viết | CSS3
Cách tạo hiệu ứng Hover Effects cho hình ảnh bằng CSS3 Transitions
Trong bài học thiết kế web này các Bạn sẽ được học Cách tạo hiệu ứng Hover Effects cho hình ảnh bằng CSS3 Transitions
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
Chúc con yêu của bạn có thêm những bộ đồ thời trang cho bé trai theo phong cách đa màu sắc cực xinh xắn và đáng yêu!
Mẫu thiết kế 1
Mẫu thiết kế 2
Chúc con yêu của bạn có thêm những bộ đồ thời trang cho bé trai theo phong cách đa màu sắc cực xinh xắn và đáng yêu!
Mẫu thiết kế 2
Mẫu thiết kế 3
Chúc con yêu của bạn có thêm những bộ đồ thời trang cho bé trai theo phong cách đa màu sắc cực xinh xắn và đáng yêu!
Mẫu thiết kế 3
Bước 2: Định dạng CSS
.box{
text-align: center;
position: relative;
overflow: hidden;
}
.box img{
width: 100%;
height: auto;
}
.box .box-content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(144, 70, 86, 0.7);
color: #f9eee8;
padding: 30px 20px;
transform: scale(0);
transition: all 0.5s ease 0s;
}
.box:hover .box-content{
transform: scale(1);
}
.box .title{
font-size: 18px;
font-weight: 800;
margin-bottom: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.box .title a{
font-size: 18px;
font-weight: 800;
margin-bottom: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
.box .description{
font-size: 14px;
margin-bottom: 15px;
}
.box .social-links{
padding: 0;
margin: 0;
list-style: none;
}
.box .social-links li{
display: inline-block;
margin-right: 10px;
}
.box .social-links li a{
display: block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
font-size: 17px;
color: #f9eee8;
border: 1px solid #f9eee8;
transition: all 0.5s ease 0s;
}
.box .social-links li a:hover{
background: #904656;
border: 1px solid #904656;
}
.box .heading{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: rgba(12, 1, 25,0.7);
color: #ffffff;
text-align: center;
padding: 20px 0;
transition: all 0.5s ease 0s;
font-family: Arial, Helvetica, sans-serif;
}
.box:hover .heading{
bottom: -30%;
font-family: Arial, Helvetica, sans-serif;
}
.box .heading h3{
margin: 0;
font-size: 24px;
font-weight: 800;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
@media only screen and (max-width: 990px){
.box{
margin-bottom: 20px;
}
}
@media only screen and (max-width: 360px){
.box .box-content{
padding: 10px;
}
.box:hover .heading{
bottom: -40%;
}
}
Bước 3: Gọi thư viện Bootstrap và Font awesome
Bước 4: Gọi thư viện JQUERY
CSS3 Xem (8843) Học thiết kế web giá rẻ
