Hiệu ứng phóng to ảnh khi dê chuột vào với Hover Image Gallery

Hôm nay Namkna sẽ giới thiệu cho các bạn một hiệu ứng phóng ảnh hoàn toàn mới. Khi bạn dê chuột vào ảnh. Nếu các bạn còn nhớ thì mình đã từng giới thiệu cho các bạn Hiệu ứng thay đổi ảnh khi dê chuột vào Hiệu ứng này còn một nhược điểm là hoạt động không tốt trên IE.

Các bạn có thể xem Demo: View Demo

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced):
4- Thêm đoạn Code sau trước thẻ:</head>

<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>

Tùy chỉnh:

• opacity: 0.7; độ mờ của anh khi chưa dê chuột lên.
• opacity: 1; Độ mờ của anh khi dê chuột vào (Ảnh 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 dê chuột vào.
• Các tiền tố -webkit, -moz, -o để hiệu ứng chạy tốt trên nhiều lọa trình duyệt khác nhau là Opera, Safari, Moliza.
• 
  
• Nếu muốn tăng/giảm kích cỡ hình ảnh thu nhỏ bạn thay đổi thông số 0.8

Code khi chèn ảnh:

Khi đăng bài viết bạn check vào HTML và dán code bên dưới vào.

<div class="hovergallery">
<img src="Link ảnh 1" />
<img src="Linh ảnh 2" />
<img src="Link ảnh 3" />
</div>

Chúc thành công!

Tweet