và hôm nay tiếp tục, chia sẻ tiếp một hiệu ứng tương tự đang sử dụng tại blog hiện tại. Ở đây mình cũng sử dụng CSS để làm hiệu ứng này nhưng với đoạn đoạn mã chuyên nghiệp hơn.
Hiệu ứng phóng to và làm mờ ảnh cho Blogger
Bắt đầu thì bạn đăng nhập vào trang Blogger của mìnhTiếp tục vào Mẫu » Chỉnh sửa HTML tìm đến thẻ ]]></b:skin> thêm đoạn mã sau lên bên trên
.post img:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
opacity: 0.5;
}
.post img {
-webkit-transition-duration: 1.0s;
/* Webkit: Animation duration; */
-moz-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
}
bạn có thể thay đổi 1.1 thành tỉ lệ mà bạn muốn hình ảnh phóng to hoặc thu nhỏ như thế nào với 1 là kích cỡ mặc định của ảnh. Bạn có thể xóa bỏ opacity: 0.5; để bỏ hiệu ứng làm mờ ảnh hoặc thay đổi 0.5 thành tỉ lệ mờ ảnh mà bạn muốn.
