Hiệu ứng phóng to ảnh khi dê chuột vào với Hover Image Gallery
☼ Cách tiến hành:
1- Đăng nhập (login) vào Blog2- 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:
<div class="hovergallery">
<img src="Link ảnh 1" />
<img src="Linh ảnh 2" />
<img src="Link ảnh 3" />
</div>
Post a Comment