box hover slide element
Kết hợp xử lý background và các thuộc tính transition của CSS3, cho ta hiệu ứng hover đẹp mắt, mỗi giá trị khác nhau sẽ hiển thị hiệu ứng khác nhau.
Trình duyệt – hệ điều hành hỗ trợ
Yêu cầu phiên bản với mức tối thiểu được hỗ trợ:
Trình duyệt
10
4
10.5
4
5.1
Hệ điều hành Smartphone – Tablets
3.2
2.1
8
box hover – slider change background
- Đây là dạng kỹ thuật kết hợp, thay đổi position right của item bên trên, và thay đổi background-color của thành phần bên dưới, tất nhiên không thể thiếu kỹ thuật opacity chuyển dần về 0 cho image.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
img { vertical-align:middle; }
.box-hover {
border: 1px solid #CCC;
height: auto;
margin: 10px auto;
overflow: hidden;
position: relative;
transition: all 0.5s;
width: 200px;
}
.box-hover img {
max-width: 100%;
transition: all 0.3s;
opacity: 1;
}
.box-hover h3,
.box-hover p {
position: absolute;
right: -200%;
width: 100%;
text-align: center;
}
.box-hover h3 {
top: 30%;
transition: all 0.5s;
}
.box-hover p {
top: 45%;
transition: all 1s;
}
.box-hover:hover {
background-color: #FFF;
}
.box-hover:hover img {
opacity: 0;
}
.box-hover:hover h3,
.box-hover:hover p {
right: 0;
}
</style>
</head>
<body>
<div class="box-hover">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
<h3>item 1</h3>
<p>item 2</p>
</div>
</body>
</html>
Hiển thị trình duyệt:
box hover – slider both
- Kỹ thuật này áp dụng tương tự như trên, nhưng 2 thành phần bên trên được chuyển động ở 2 vị trí khác nhau thông qua việc xử lý thuộc tính left và right.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
img { vertical-align:middle; }
.box-hover {
border: 1px solid #CCC;
height: auto;
margin: 10px auto;
overflow: hidden;
position: relative;
transition: all 0.5s;
width: 200px;
}
.box-hover img {
max-width: 100%;
transition: all 0.3s;
opacity: 1;
}
.box-hover h3,
.box-hover p {
position: absolute;
width: 100%;
text-align: center;
}
.box-hover h3 {
left: -200%;
top: 30%;
transition: all 0.5s;
}
.box-hover p {
right: -200px;
top: 45%;
transition: all 0.5s;
}
.box-hover:hover {
background-color: #FFF;
}
.box-hover:hover img {
opacity: 0;
}
.box-hover:hover h3 {
left: 0;
}
.box-hover:hover p {
right: 0;
}
</style>
</head>
<body>
<div class="box-hover">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
<h3>item 1</h3>
<p>item 2</p>
</div>
</body>
</html>
Hiển thị trình duyệt:
box hover – slider up
- Cũng tương tự như trên, nhưng ở đây sử dụng thuộc tính bottom thay cho thuộc tính right.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
img { vertical-align:middle; }
.box-hover {
border: 1px solid #CCC;
height: auto;
margin: 10px auto;
overflow: hidden;
position: relative;
transition: all 0.5s;
width: 200px;
}
.box-hover img {
max-width: 100%;
transition: all 0.3s;
opacity: 1;
}
.box-hover h3,
.box-hover p {
position: absolute;
bottom: -200%;
left: 0;
width: 100%;
text-align: center;
}
.box-hover h3 {
transition: all 0.5s;
}
.box-hover p {
transition: all 1s;
}
.box-hover:hover {
background-color: #FFF;
}
.box-hover:hover img {
opacity: 0;
}
.box-hover:hover h3 {
bottom: 50%;
}
.box-hover:hover p {
bottom: 40%;
}
</style>
</head>
<body>
<div class="box-hover">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
<h3>item 1</h3>
<p>item 2</p>
</div>
</body>
</html>
Hiển thị trình duyệt:
box hover – slider vertical
- Kỹ thuật này tương tự như kỹ thuật cho slider both, nhưng lại xử lý bằng thuộc tính top và bottom để tạo chuyển động vertical.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
img { vertical-align:middle; }
.box-hover {
border: 1px solid #CCC;
height: auto;
margin: 10px auto;
overflow: hidden;
position: relative;
transition: all 0.5s;
width: 200px;
}
.box-hover img {
max-width: 100%;
transition: all 0.3s;
opacity: 1;
}
.box-hover h3,
.box-hover p {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.box-hover h3 {
top: -200%;
transition: all 0.5s;
}
.box-hover p {
bottom: -200%;
transition: all 1s;
}
.box-hover:hover {
background-color: #FFF;
}
.box-hover:hover img {
opacity: 0;
}
.box-hover:hover h3 {
top: 30%;
}
.box-hover:hover p {
bottom: 40%;
}
</style>
</head>
<body>
<div class="box-hover">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
<h3>item 1</h3>
<p>item 2</p>
</div>
</body>
</html>