Hiển thị icon kính lúp phóng to khi rê chuột vào hình ảnh cho Blogger

Show magnifier icon when hover on image for Blogger

Đây là một thủ thuật nhỏ nhưng khá thú vị. Khi bạn rê chuột vào hình ảnh biểu tượng kính lúp sẽ thay thế icon con trỏ chuột mặc định, thông báo cho khách truy cập biết họ có thể click vào đấy để phóng to hình ảnh. Và bạn nhớ bật chức năng lightbox cho blog, nếu không hình ảnh sẽ không phóng to đâu nhé.

• DEMO

Cách thực hiện

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS dưới đây trước thẻ ]]></b:skin>

/*Zoom Image*/
.post-body img:hover{cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRpziPzCDvrU3I4_RAAnRPHHEsFOLZ4L04GYjBEYiuuKKT275oPiXiaau6yI9-z9M7-qkRT75OuHE7Tz21z4_Ccdb8-Xhyphenhypheny0KDzja6r23BkP6xkmhiJVhOfhjGmIyWd9cmNCR9I6JxEMvb/s1600/zoom_in.png), progress;opacity:0.9}

2Chỉnh sửa: Bạn có thể thay lại bằng biểu tượng khác bằng cách thay thế url hình ảnh
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRpziPzCDvrU3I4_RAAnRPHHEsFOLZ4L04GYjBEYiuuKKT275oPiXiaau6yI9-z9M7-qkRT75OuHE7Tz21z4_Ccdb8-Xhyphenhypheny0KDzja6r23BkP6xkmhiJVhOfhjGmIyWd9cmNCR9I6JxEMvb/s1600/zoom_in.png

Một số biểu tượng kính lúp khá đẹp cho bạn lựa chọn:

• DOWNLOAD

3Bạn cũng có thể kết hợp với thủ thuật dưới đây nếu không muốn bật lightbox nhé

Xem thêm: Hiệu ứng phóng to hình ảnh khi rê chuột vào bằng CSS3

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Password: iris-tips.blogspot.com
Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm