Hiệu ứng phóng to và làm mờ ảnh là một trong những việc làm đơn giản nhưng lại khiến cho blog/website của bạn trông hấp dẫn và bắt mắt hơn trong mắt người dùng. Lúc trước mình đã có chia sẻ một hiệu ứng phóng to ảnh 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ình
Tiế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.
0 nhận xét:
Đăng nhận xét