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
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.
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
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.
lúc 16:37 15 tháng 8, 2015
Làm thế nào để nó zoom mà size vẫn giữ nguyên nhỉ Lâm?
VD: http://magonedemo.blogspot.com
lúc 23:32 18 tháng 8, 2015
Lâm
lúc 18:39 22 tháng 8, 2015
Template đó nó sử dụng CSS giống y như cái share ở trên mà :D Trừ cái Opacity ra.
lúc 17:33 23 tháng 8, 2015
Tớ dùng đoạn mã trên của Lâm, scale 1.1 thì ảnh từ 100px khi hover thành 110px. Trong khi ở trang magone kia tớ cũng thấy dạng như vậy nhưng khi hover size vẫn giữ nguyên (vẫn là 100px), mà ảnh bên trong thì như dạng zoom+ hoặc grow.
http://designshack.net/articles/css/joshuajohnson-2/
lúc 18:44 28 tháng 8, 2015
À không có đâu duy, ảnh nó vẫn to lên, chẳng qua thẻ cha của nó có thuộc tính Overflow: hidden; đo đó thằng ảnh con nó không có hiện khi nằm ngoài thằng cha nó.
lúc 10:42 5 tháng 11, 2015
Lâm cho mình hỏi mình muốn phóng to ảnh rồi toàn bộ trang web phía sau sẽ bị mờ đi và không tương tác được nữa. Khi mình bấm ra ngoài thì hình sẽ nhỏ lại như cũ. Giống như trong facebook vậy ak. Cho mình xin code được không???