10 Hiệu ứng Hover Image Css - Image Hover Effect CSS - FLATSOME

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 :

<div class="img-hover-zoom"> <img src="/path/to/image/" alt="This zooms-in really well and smooth"> </div>

123	<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] 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-zoom img { transition: transform .5s ease; } /* [3] Finally, transforming the image when container gets hovered */ .img-hover-zoom:hover img { transform: scale(1.5); }

123456789101112131415

/* [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

<div class="img-hover-zoom img-hover-zoom--xyz"> <img src="/path/to/image/" alt="Another Image zoom-on-hover effect"> </div>

123	<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

/* Quick-zoom Container */ .img-hover-zoom--quick-zoom img { transform-origin: 0 0; transition: transform .25s, visibility .25s ease-in; } /* The Transformation */ .img-hover-zoom--quick-zoom:hover img { transform: scale(2); }

12345678910

/* 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 đó

/* Point-zoom Container */ .img-hover-zoom--point-zoom img { transform-origin: 65% 75%; transition: transform 1s, filter .5s ease-out; } /* The Transformation */ .img-hover-zoom--point-zoom:hover img { transform: scale(5); }

12345678910

/* 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

/* Zoom-n-rotate Container */ .img-hover-zoom--zoom-n-rotate img { transition: transform .5s ease-in-out; } /* The Transformation */ .img-hover-zoom--zoom-n-rotate:hover img { transform: scale(2) rotate(25deg); }

123456789

/* 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

/* Slow-motion Zoom Container */ .img-hover-zoom--slowmo img { transform-origin: 50% 65%; transition: transform 5s, filter 3s ease-in-out; filter: brightness(150%); } /* The Transformation */ .img-hover-zoom--slowmo:hover img { filter: brightness(100%); transform: scale(3); }

123456789101112

/* 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

/* Brightness-zoom Container */ .img-hover-zoom--brightness img { transition: transform 2s, filter 1.5s ease-in-out; transform-origin: center center; filter: brightness(50%); } /* The Transformation */ .img-hover-zoom--brightness:hover img { filter: brightness(100%); transform: scale(1.3); }

123456789101112

/* 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

/* Horizontal Zoom-n-pan Container */ .img-hover-zoom--zoom-n-pan-h img { transition: transform .5s ease-in-out; transform: scale(1.4); transform-origin: 100% 0; } /* The Transformation */ .img-hover-zoom--zoom-n-pan-h:hover img { transform: scale(1.5) translateX(30%); }

1234567891011

/* 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

/* Vertical Zoom-n-pan Container */ .img-hover-zoom--zoom-n-pan-v img { transition: transform .5s ease-in-out; transform: scale(1.4); transform-origin: 0 0; } /* The Transformation */ .img-hover-zoom--zoom-n-pan-v:hover img { transform: scale(1.25) translateY(-30%); }

1234567891011

/* 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

/* Blur-zoom Container */ .img-hover-zoom--blur img { transition: transform 1s, filter 2s ease-in-out; filter: blur(2px); transform: scale(1.2); } /* The Transformation */ .img-hover-zoom--blur:hover img { filter: blur(0); transform: scale(1); }

123456789101112

/* 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

/* Colorize-zoom Container */ .img-hover-zoom--colorize img { transition: transform .5s, filter 1.5s ease-in-out; filter: grayscale(100%); } /* The Transformation */ .img-hover-zoom--colorize:hover img { filter: grayscale(0); transform: scale(1.1); }

1234567891011

/* 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

Điểm 1.6/5 - ( Có 27 bình chọn)