Tất cả bài viết | CSS3
Cách tạo hiệu ứng Hover Effects cho hình ảnh
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ướ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 đ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!
Đặt hàng
Mẫu thiết kế 2
Giá: 200.000 đ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!
Đặt hàng
Mẫu thiết kế 3
Giá: 200.000 đ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!
Đặt hàng
Bước 2: Định dạng CSS
.box {
position: relative;
overflow: hidden;
box-shadow: 0 0 5px #555;
}
.box img {
width: 100%;
height: auto;
}
.box .box-heading {
width: 90%;
position: absolute;
bottom: 25px;
left: 5%;
background: rgba(7, 185, 244, 0.6);
padding: 10px 60px 10px 25px;
color: #fff;
transition: all 0.3s ease 0s;
}
.box:hover .box-heading {
left: 100%;
}
.box .box-heading:after {
content: "";
font-family: fontawesome;
width: 40px;
height: 40px;
line-height: 40px;
position: absolute;
top: 13px;
right: 11px;
background: #20211c;
font-size: 30px;
color: #fff;
text-align: center;
}
.box .title {
margin: 0;
font-size: 18px;
font-weight: bold;
}
.box .post {
display: block;
font-size: 14px;
color: #fff;
text-transform: capitalize;
margin-top: 5px;
}
.box .boxContent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -100%;
padding: 30px 35px;
background: rgba(7, 185, 244, 0.8);
transition: all 0.3s ease 0s;
}
.box:hover .boxContent {
left: 0;
}
.box .description {
font-size: 14px;
color: #fff;
line-height: 25px;
}
.box .cart {
display: inline-block;
padding: 10px 20px;
background: #20211c;
font-size: 14px;
font-weight: 700;
color: #fff;
margin-top: 20px;
transition: all 0.3s ease 0s;
}
.box .cart:hover {
text-decoration: none;
background: #fff;
color: #3fc9f7;
}
.box .cart i {
font-size: 20px;
font-weight: 700;
margin-left: 10px;
}
@media only screen and (max-width: 990px) {
.box {
margin-bottom: 20px;
}
}
@media only screen and (max-width: 479px) {
.box .boxContent {
padding: 10px;
}
.box .cart {
margin-top: 10px;
}
}
Bước 3: Gọi thư viện Bootstrap và Font awesome
Bước 4: Gọi thư viện JQUERY
CSS3 Xem (6841) Học thiết kế web giá rẻ
