Hướng dẫn css hover image zoom - thu phóng hình ảnh di chuột css

Learn how to zoom/scale an element on hover with CSS.

Zoom on Hover

Hover over the green box:

How To Zoom on Hover

Example

.zoom {  padding: 50px;  background-color: green;  transition: transform .2s; /* Animation */  width: 200px;  height: 200px;  margin: 0 auto;}
.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s; /* Animation */
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */}
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

Try it Yourself »

Tip: Go to our CSS Transform Tutorial to learn more about how to scale elements. Go to our CSS Transform Tutorial to learn more about how to scale elements.

Box hover scale image

Dùng CSS3 để tạo hiệu ứng khi hover, trước đây muốn thay đổi trạng thái một thành phần, ta dùng những kỹ thuật phức tạp hoặc phải có sự can thiệp của javascript, giờ đây CSS3 có thể thực hiện được dễ dàng.

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

Hệ điều hành Smartphone – Tablets

box hover – zoom out

• Kỹ thuật được dùng ở đây là xử lý transform scale cho image khi hover, kết hợp với transition để có hiệu ứng mượt mà hơn.

Html viết:

Hiển thị trình duyệt:

Download file để thực hành

Box hover – zoom và transfer

• Vẫn là kỹ thuật xử lý bằng transform scale cho image khi hover, tuy nhiên chúng ta kết hợp thêm rotate cho chuyển động xoay 3D.

Html viết:

Hiển thị trình duyệt:

Box hover scale image

Dùng CSS3 để tạo hiệu ứng khi hover, trước đây muốn thay đổi trạng thái một thành phần, ta dùng những kỹ thuật phức tạp hoặc phải có sự can thiệp của javascript, giờ đây CSS3 có thể thực hiện được dễ dàng.

Nội dung chính

• Box hover scale image
• Dùng CSS3 để tạo hiệu ứng khi hover, trước đây muốn thay đổi trạng thái một thành phần, ta dùng những kỹ thuật phức tạp hoặc phải có sự can thiệp của javascript, giờ đây CSS3 có thể thực hiện được dễ dàng.
• Nội dung chính
• Trình duyệt – hệ điều hành hỗ trợ
• box hover – zoom out
• Box hover – zoom và transfer
• Dẫn nhập
• Kết luận
• Tải xuống
• Thảo luận

Dùng CSS3 để tạo hiệu ứng khi hover, trước đây muốn thay đổi trạng thái một thành phần, ta dùng những kỹ thuật phức tạp hoặc phải có sự can thiệp của javascript, giờ đây CSS3 có thể thực hiện được dễ dàng.

Nội dung chính

Trình duyệt – hệ điều hành hỗ trợ

box hover – zoom out

Nội dung chính

• Trình duyệt – hệ điều hành hỗ trợ

box hover – zoom out

Box hover – zoom và transfer

Dẫn nhập

Trình duyệt – hệ điều hành hỗ trợ

• box hover – zoom out

box hover – zoom out

Box hover – zoom và transfer

box hover – zoom out

Box hover – zoom và transfer

Dẫn nhậpHiệu ứng hover image và set video background.

Hiệu ứng hover image

Set video background

• Yêu cầu phiên bản với mức tối thiểu được hỗ trợ:
• Trình duyệt

Hệ điều hành Smartphone – Tablets

• Kỹ thuật được dùng ở đây là xử lý transform scale cho image khi hover, kết hợp với transition để có hiệu ứng mượt mà hơn.
• Html viết:

Box hover – zoom và transfer

Dẫn nhập pseudo-class :hover với opacity và vị trí của caption là được.

// components/_testimonials.scss
&:hover &__caption{
        opacity: 1;
        transform: translate(-50%,-50%);

    }

Hiệu ứng hover image&__img ta thấy là bức ảnh bị tối đi, và bị làm nhòe cũng như phóng ta ra 1 chút xíu

Set video backgroundfilter(là property dùng chỉnh đồ mờ, sáng hoặc màu sắc cho các element)

Trình duyệtblur (độ mờ), brightness (độ sáng)

Hệ điều hành Smartphone – Tabletstransition cho hiệu ứng thêm mượt mà nữa là được.

    &__img{
        transition: all .3s; 
    }

    &__caption{
        transition: all .5s;
    }

Dẫn nhập

Hiệu ứng hover imagehtml để chèn video làm background

Set video background

            

                
            
            

                

                    testimonials
                
            
            

                

                    

                        

                        
                    
                    

                        

                            thank for your guide
                        
                        

                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Incidunt repellat tenetur officia quis quasi,
                            temporibus neque reiciendis quaerat exercitationem quibusdam?
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Possimus dolorem labore nam?
                        
                    
                
                

                    

                        

                        
                    
                    

                        

                            very helpful course
                        
                        

                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Incidunt repellat tenetur officia quis quasi,
                            temporibus neque reiciendis quaerat exercitationem quibusdam?
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Possimus dolorem labore nam?
                        
                    
                
            
            

                read all the testimonials →
            
        

Yêu cầu phiên bản với mức tối thiểu được hỗ trợ:source để ghi địa chỉ file video mà chúng ta sẽ sử dụng, có các property trong thẻ video như muted (không phát ra âm thanh), autoplay(sẽ chạy ngay khi load trang web), loop(sẽ chạy video liên tục), text nằm trong thẻ video sẽ hiện ra nếu như source không load được video, ở đây sẽ hiện lên dòng chữ “your browser is not supported” nếu trường hợp đó xảy ra.

Ta đặt tên class chưa video là bg-video và chúng ta sẽ tạo 1 component để code css cho phần background này. Tạo file _bg-video.scss trong folder component và import nó vào main.scssbg-video và chúng ta sẽ tạo 1 component để code css cho phần background này. Tạo file _bg-video.scss trong folder component và import nó vào main.scssbg-video và chúng ta sẽ tạo 1 component để code css cho phần background này. Tạo file _bg-video.scss trong folder component và import nó vào main.scss

// main.scss
@import './components/bg-video';

Quay lại file _bg-video.scss, chúng ta sẽ để cho position div.bg-video video là absolute, để z-index: -1 để chắc chắn là video nằm dưới tât cả các element còn lại. Tiếp đó là để opacity:0.2; _bg-video.scss, chúng ta sẽ để cho position div.bg-video video là absolute, để z-index: -1 để chắc chắn là video nằm dưới tât cả các element còn lại. Tiếp đó là để opacity:0.2; _bg-video.scss, chúng ta sẽ để cho position div.bg-video video là absolute, để z-index: -1 để chắc chắn là video nằm dưới tât cả các element còn lại. Tiếp đó là để opacity:0.2;

.bg-video{
    
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: .2;
}

Ta thấy được video bị tràn ra ngoài, chúng ta sẽ sử dụng over-flow: hidden; giờ đây thì video đã không bị tràn nữa nhưng thực sự thì nội dung của video chỉ mới bị che đi thôi nên nó vẫn có scroll bar chiều ngang xuất hiện .over-flow: hidden; giờ đây thì video đã không bị tràn nữa nhưng thực sự thì nội dung của video chỉ mới bị che đi thôi nên nó vẫn có scroll bar chiều ngang xuất hiện .over-flow: hidden; giờ đây thì video đã không bị tràn nữa nhưng thực sự thì nội dung của video chỉ mới bị che đi thôi nên nó vẫn có scroll bar chiều ngang xuất hiện .

Chúng ta sẽ chỉnh css của .bg-video__content để giải quyết vấn để này. đầu tiên ta sẽ set width và hight cho video là 100% .bg-video__content để giải quyết vấn để này. đầu tiên ta sẽ set width và hight cho video là 100% .bg-video__content để giải quyết vấn để này. đầu tiên ta sẽ set width và hight cho video là 100%

Bạn thấy content của video đã vừa với width của website nên không còn scrollbar theo chiều ngang nữa nhưng video lại chưa ôm hết dược nội dung của section (ở đây video chưa ôm hết được tiêu đề của section) scrollbar theo chiều ngang nữa nhưng video lại chưa ôm hết dược nội dung của section (ở đây video chưa ôm hết được tiêu đề của section) scrollbar theo chiều ngang nữa nhưng video lại chưa ôm hết dược nội dung của section (ở đây video chưa ôm hết được tiêu đề của section)

Ở đây ta dùng 1 thuộc tính nữa của css đó là object-fit, nó sẽ giúp căn chỉnh image hoặc video phù hợp với size của container cho bạn 1 cách dễ dàngobject-fit, nó sẽ giúp căn chỉnh image hoặc video phù hợp với size của container cho bạn 1 cách dễ dàngobject-fit, nó sẽ giúp căn chỉnh image hoặc video phù hợp với size của container cho bạn 1 cách dễ dàng

Vậy là ta được video background như mong muốn.

Code CSS

Kết luận

Ở bài này chúng ta đã cùng nhau kết thúc code Testimonials section.

Trong bài sau chúng ta sẽ code phần ENROLL SECTION.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó".Luyện tập – Thử thách – Không ngại khó".Luyện tập – Thử thách – Không ngại khó".

Tải xuống

Project

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!PROJECT THAM KHẢO ở link bên dưới!PROJECT THAM KHẢO ở link bên dưới!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.