Để blog thêm phần sinh động hơn thì mình xin chia sẻ cách khi rê chuột vào hình ảnh thì hình ảnh sẽ tự động phóng to lên sử dụng css.
Đầu tiên ta đăng nhập vào blog, sau đó vào chủ đề xong chọn chỉnh sửa HTML.
Thêm đoạn Code css dưới vào trước thẻ </head>
<style type="text/css">
.zoomimagic 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;
}
.zoomimagic img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
</style>Thông số lưu ý:
opacity: 0.7; Độ mờ của anh khi chưa dê chuột lên.
opacity: 1; Độ mờ của anh khi rê chuột vào (mờ nhất là 0 và nét nhất là 1)
box-shadow:0px 0px 30px gray; Hiệu ứng đổ bóng của anh khi rê chuột vào.
Các tiền tố -webkit, -moz, -o để hiệu ứng chạy tốt trên nhiều trình duyệt khác nhau là Opera, Safari, Moliza.
Muốn tăng/giảm kích cỡ hình ảnh thu nhỏ ta thay đổi thông số 0.8 là được.
Lưu ý:
Khi đăng hình ảnh ta chèn thêm mã dưới vào để chức năng trên được thực hiện.
<div class="zoomimagic"> <img src="Link ảnh " /> </div>
Các bạn có thể xem Demo:Tại Đây
Đơn giản vậy thôi, chúc các bạn thành công!
