Phóng to hình ảnh khi rê chuột vào trên blog


Phóng to hình ảnh khi rê chuột vào trên blog

22 Likes Comment

Để 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!

 

Chủ bút: Lê Tú

Blog mình lập ra nhằm mục đích viết lại những gì mình đã tìm hiểu, đã đọc được trên mạng, qua bạn bè để mai mốt cần tìm khỏi quên, cũng như chia sẻ những thứ mà mình đã sưu tầm được. Vì mình không phải chuyên lập trình website nên một số bài viết còn sai sót mong mọi người góp ý.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *