Hiệu ứng hình cho ta cảm giác làm cho web phong phú hơn , với Image hover effect CSS vừa là cho web đẹp hơn , nhẹ và có nhiều điểm nhấn hơn trên web
10 hiệu ứng Hover Image – Image hover effect CSS
CSS cho các hiệu ứng phóng to thu nhỏ hình ảnh khi di chuột
Thực hiện phóng to khi di chuột trong CSS là một việc khá đơn giản. Tất cả những gì bạn cần biết là một vài thuộc tính CSS3 và bạn đã sẵn sàng, hãy để phần phức tạp cho tôi, vì nó không chỉ đơn thuần là biết các thuộc tính CSS.
Cấu trúc thêm hiệu ứng
HTML rất đơn giản. ví dụ ta có class ngoài hình dạng sau :
|
1
2
3
|
<div class=“img-hover-zoom”>
<img src=“/path/to/image/”alt=“This zooms-in really well and smooth”>
</div>
|
Note :
- class=”img-hover-zoom nằm ngoài hình
- /path/to/image/ – Link chưa hình ảnh
CSS thêm Hover
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* [1] The container */
.img–hover–zoom{
height:300px;/* [1.1] Set it as per your need */
overflow:hidden;/* [1.2] Hide the overflowing of child elements */
}
/* [2] Transition property for smooth transformation of images */
.img–hover–zoomimg{
transition:transform.5sease;
}
/* [3] Finally, transforming the image when container gets hovered */
.img–hover–zoom:hoverimg{
transform:scale(1.5);
}
|
Xem demo
Các hiệu ứng ZOOM khác
thẻ HTML của hiệu ứng
|
1
2
3
|
<div class=“img-hover-zoom img-hover-zoom–xyz”>
<img src=“/path/to/image/”alt=“Another Image zoom-on-hover effect”>
</div>
|
Zoom to và nhỏ nhanh chống
|
1
2
3
4
5
6
7
8
9
10
|
/* Quick-zoom Container */
.img–hover–zoom—quick–zoomimg{
transform–origin:00;
transition:transform.25s,visibility.25sease–in;
}
/* The Transformation */
.img–hover–zoom—quick–zoom:hoverimg{
transform:scale(2);
}
|
Zoom tới 1 điểm nào đó
|
1
2
3
4
5
6
7
8
9
10
|
/* Point-zoom Container */
.img–hover–zoom—point–zoomimg{
transform–origin:65%75%;
transition:transform1s,filter.5sease–out;
}
/* The Transformation */
.img–hover–zoom—point–zoom:hoverimg{
transform:scale(5);
}
|
Zoom và xoay tấm hình
|
1
2
3
4
5
6
7
8
9
|
/* Zoom-n-rotate Container */
.img–hover–zoom—zoom–n–rotateimg{
transition:transform.5sease–in–out;
}
/* The Transformation */
.img–hover–zoom—zoom–n–rotate:hoverimg{
transform:scale(2)rotate(25deg);
}
|
Zoom to hình và chuyển động chậm lại
|
1
2
3
4
5
6
7
8
9
10
11
12
|
/* Slow-motion Zoom Container */
.img–hover–zoom—slowmoimg{
transform–origin:50%65%;
transition:transform5s,filter3sease–in–out;
filter:brightness(150%);
}
/* The Transformation */
.img–hover–zoom—slowmo:hoverimg{
filter:brightness(100%);
transform:scale(3);
}
|
Làm sáng và phóng to
|
1
2
3
4
5
6
7
8
9
10
11
12
|
/* Brightness-zoom Container */
.img–hover–zoom—brightnessimg{
transition:transform2s,filter1.5sease–in–out;
transform–origin:center center;
filter:brightness(50%);
}
/* The Transformation */
.img–hover–zoom—brightness:hoverimg{
filter:brightness(100%);
transform:scale(1.3);
}
|
Zoom-n-pan theo chiều ngang
|
1
2
3
4
5
6
7
8
9
10
11
|
/* Horizontal Zoom-n-pan Container */
.img–hover–zoom—zoom–n–pan–himg{
transition:transform.5sease–in–out;
transform:scale(1.4);
transform–origin:100%0;
}
/* The Transformation */
.img–hover–zoom—zoom–n–pan–h:hoverimg{
transform:scale(1.5)translateX(30%);
}
|
Zoom-n-pan theo chiều dọc
|
1
2
3
4
5
6
7
8
9
10
11
|
/* Vertical Zoom-n-pan Container */
.img–hover–zoom—zoom–n–pan–vimg{
transition:transform.5sease–in–out;
transform:scale(1.4);
transform–origin:00;
}
/* The Transformation */
.img–hover–zoom—zoom–n–pan–v:hoverimg{
transform:scale(1.25)translateY(–30%);
}
|
Làm mờ bằng tính năng Phóng to
|
1
2
3
4
5
6
7
8
9
10
11
12
|
/* Blur-zoom Container */
.img–hover–zoom—blurimg{
transition:transform1s,filter2sease–in–out;
filter:blur(2px);
transform:scale(1.2);
}
/* The Transformation */
.img–hover–zoom—blur:hoverimg{
filter:blur(0);
transform:scale(1);
}
|
Tô màu bằng tính năng phóng to
|
1
2
3
4
5
6
7
8
9
10
11
|
/* Colorize-zoom Container */
.img–hover–zoom—colorizeimg{
transition:transform.5s,filter1.5sease–in–out;
filter:grayscale(100%);
}
/* The Transformation */
.img–hover–zoom—colorize:hoverimg{
filter:grayscale(0);
transform:scale(1.1);
}
|
OK trên đây là các hiệu ứng ZOom hình mà thường hay dùng trên web
nếu các bạn chua hiêu có thể xem link demo ( Sidebar nhé )
Chúc các bạn thành công
