Hiệu ứng phóng to ảnh khi rê chuột vào cho Blogger

Ở bài viết trước mình có chia sẻ hiệu ứng, xoay ảnh đồng thời bo góc cho hình ảnh, hôm nay tại bài viết này mình tiếp tục chia sẻ cho các bạn, hiệu ứng phóng to hình ảnh khi rê chuột vào. Hiệu ứng này cũng chỉ sử dụng CSS nên tốc độ tải trang bạn có thể hoàn toàn yên tâm.

Hiệu ứng phóng to ảnh khi rê chuột vào cho Blogger

Hiệu ứng phóng to ảnh khi rê chuột vào cho Blogger

Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML

Hiệu ứng phóng to ảnh khi rê chuột vào cho Blogger

Bước 2: Tiếp tục tìm đến thẻ ]]></b:skin> và thêm đoạn CSS sau vào bên trên

Hiệu ứng phóng to ảnh khi rê chuột vào cho Blogger

.post img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.post img:hover {
width: 150%;
height:150%;
}
bạn có thể thay đổi 150% thành chiều rộng của kích cỡ khác sao cho phù hợp với website của bạn bạn.

Bước 3: Lưu lại giao diện hiện tại và trải nghiệm thử.

Hiệu ứng này rất thích hợp với những website thường xuyên sử dụng những hình ảnh với kích thước lớn, cần phóng to để dễ nhìn hơn mà không muốn nhắp vào hình. Do tết đã đến thời gian hạn hẹp nên chỉ chia sẻ được những thủ thuật nhỏ, nhưng mong các bạn thích và nếu có bất cứ thắc mắc gì các bạn có thể để lại nhận xét phía dưới hoặc liên hệ với mình!

Bạn có thể tham khảo hiệu ứng phóng to ảnh bằng CSS3 tương tự nhưng mới hơn ở đây

2 bình luận

  1. avatar says

    lúc 12:43 20 tháng 8, 2014

    Tìm Google 1 phát ra cái này liền. Blog của bạn rất nhiều bài hay. Cố lên nhá :)

  2. avatar says

    lúc 14:08 20 tháng 8, 2014

    Cám ơn bạn :)

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.