Cách tạo hiệu ứng phóng to ảnh cho Blogger cực đơn giản

Trong bài viết trước, mình đã giới thiệu tới các bạn cách tạo Hiệu ứng xoay tròn hình ảnh bằng CSS3 cho Blogger. Hôm nay, trong bài viết này, mình sẽ gửi tới các bạn hướng dẫn cách tạo hiệu ứng phóng to ảnh cho Blogger cực đơn giản. Hiệu ứng này cũng hoàn toàn sử dụng CSS nên không ảnh hưởng tới tốc độ Blog

CÁCH TẠO HIỆU ỨNG PHÓNG TO ẢNH CHO BLOGGER CỰC ĐƠN GIẢN

1. Đăng nhập vào Blog

2. Vào mẫu (Template)

3. Chọn chỉnh sửa HTML.

4. Tìm ]]></b:skin> và chèn trước đó đoạn mã sau :

.hovergallery img{

-webkit-transform:scale(0.8);

-moz-transform:scale(0.8);

-o-transform:scale(0.8);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;

opacity: 0.7;

margin: 0 10px 5px 0;

}

.hovergallery img:hover{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

opacity: 1;

}

Từ giờ trở đi, khi muốn áp dụng hiệu ứng phóng to ảnh bạn chỉ cần chuyển sang chế độ HTML và sử dụng đoạn code

1 2	`<a class="hovergallery"` `href="http://nguyentien.net/"` `target="_blank">` `<img src="http://1.bp.blogspot.com/-ycrEcnVzJAs/TcXGWwcjL3I/AAAAAAAAAYQ/MiQNmK44ZOg/s200/fullblogtricks-blogger-icon.jpg"` `/></a>`

Thay http://nguyentien.net/ bằng link của bạn
Thay http://1.bp.blogspot.com/-ycrEcnVzJAs/TcXGWwcjL3I/AAAAAAAAAYQ/MiQNmK44ZOg/s200/fullblogtricks-blogger-icon.jpg bằng link ảnh

ÁP DỤNG HIỆU ỨNG ZOOM ẢNH CHO TẤT CẢ CÁC ẢNH TRONG BÀI VIẾT

Cái này, bạn cũng làm tương tự như trên

1. Đăng nhập vào Blog

2. Vào mẫu (Template)

3. Chọn chỉnh sửa HTML.

4. Tìm ]]></b:skin> và chèn trước đó đoạn mã sau :

.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%;

}