Tạo hiệu ứng phóng to ảnh cho Blogspot đơn giản với CSS3

Jakub BB sẽ giới thiệu đến các bạn ứng phóng to ảnh  bằng css khá là đơn giản. Đó là sử dụng :hover để tạo hiệu ứng click cho ảnh trong blogspot.

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 nó đoạn code sau:

.img-zoom 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;
}

.img-zoom img: hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
opacity: 1;
}

Khi post bài viết thì chuyển sang chế độ HTML và chèn code sau:

Thay link  http://www.jakub-bb.net/ và link ảnh của bạn chèn vào bài viết.

Đối với khi đặt hiệu ứng zoom ảnh cho tất cả các ảnh trong bài viết.

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

Trong đó:

width: 150%;
height:150%; 

Là chiều rộng, chiều cao của ảnh khi zoom.
Cuối cùng Save template lại và xem kết quả.

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

Jakub BB