Hiệu ứng phóng to và làm mờ ảnh cho Blogger

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

• Hiệu ứng phóng to ảnh khi rê chuột vào cho Blogger

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.

Lời kết

Thủ thuật này cũng tương tự như thủ thuật có trước đó, nhưng ở đây mình sử dụng các khác để thay đổi lại tỉ lệ vốn cho của ảnh để phóng to ảnh. Mọi thắc mắc hoặc vấn đề gì liên quan mà bạn không hiểu hoặc cần hỗ trợ bạn có thể để lại nhận xét bên dưới.