Thủ thuật xem ảnh lớn hơn cho Blogspot bằng CSS3

Rất đơn giản bạn chỉ cần thực hiện 2 bước sau:

1- Vào Bố cục (Layout)

2- Tạo một tiện ích HTML/Javascripts bất kỳ trên Blog của bạn và dán code ngay bên dưới đây vào tiện ích đó.

<style type='text/css'> img { transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } img:hover { transform: scale(1.5,1.5); -webkit-transform: scale(1.5,1.5); -moz-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); -ms-transform: scale(1.5,1.5); } </style>

Demo: Bạn thử dê chuột vào Image bên dưới xem thế nào ha^^

Postscript:

Nếu bạn không học về IT or không phải là chuyên gia thì bạn không cần phải đọc P/S này.

Transform: scale(x,y)  -  theo đó x, y là các giá trị ta muốn phóng lên theo trục x và y, thường thì ta để x = y để bức ảnh được phóng to mà vẫn giữ nguyên tỉ lệ. Chẳng hạn transform: scale(3,3) sẽ làm bức ảnh phóng to lên 3 lần.

Transition: all 2s ease  -  theo đó chúng ta sẽ làm bức ảnh được phóng to dần dần trong khoảng thời gian 2s chứ không đùng một cái to lên luôn.

Đoạn code trên có nghĩa là mọi hiệu ứng chuyển đổi sẽ diễn ra trong vòng 1s, hiệu ứng sẽ xảy ra khi dê chuột lướt qua ảnh và làm bức hình tăng kích thước lên 1.5 lần. Các tiền tố -webkit, -moz, -o, -ms là để phù hợp với các trình duyệt khác nhau.

Chúc các bạn thành công !