Tạo hiệu ứng phóng to, thu nhỏ ảnh khi rê chuột vào

[PVS]

Mình xin hướng dẫn các bạn tạo hiệu ứng phóng to khi rê chuột (:hover) vào các hình ảnh trong website. Hướng dẫn này áp dụng với tất cả các trang web chứ không chỉ dành riêng cho diễn đàn Xenforo. Hiệu ứng này giúp cho trang web của bạn trở nên phong cách hơn (chắc là vậy). Các bạn có thể xem ví dụ bằng cách rê chuột vào các hình ảnh lớn ở trang chủ.

Bắt đầu thôi, các bạn copy đoạn CSS dưới đây dán vào code CSS của bạn. Thêm cặp thẻ <style type="text/css">Đoạn code CSS phía dưới</style> nếu muốn đặt code này luôn trong code HTML.

.hoverimage img{
-webkit-transform:scale(0.8); /*Webkit: Thu nhỏ kích thước ảnh còn 0.8 so với ảnh gốc*/
-moz-transform:scale(0.8); /*Thu nhỏ đối với Mozilla*/
-o-transform:scale(0.8); /*Thu nhỏ đối với Opera*/
-webkit-transition-duration: 0.5s; /*Webkit: Thời gian phóng to, nhỏ ảnh*/
-moz-transition-duration: 0.5s; /*Như trên*/
-o-transition-duration: 0.5s; /*Như trên*/
opacity: 0.7; /*Độ mờ của hình ảnh*/
margin: 0 10px 5px 0; /*căn đều giữa ảnh*/
}
.hoverimage img:hover{
-webkit-transform:scale(1.1); /*Webkit: Tăng kích cỡ ảnh lên 1.1 lần*/
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray; /*Đổ bóng bằng CSS3*/
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1; /*Độ mờ của hình ảnh*/
}

Phần .hoverimage img là CSS của hình ảnh bình thường, .hoverimage img:hover là CSS của hình ảnh khi rê chuột vào. Bên cạnh mỗi câu mình đều có chú thích các bạn có thể thay đổi các thông số tùy thích để có những hiệu ứng đẹp nhất.
Tiếp theo đó các bạn đặt hình ảnh cần phóng to, thu nhỏ vào cặp thẻ dưới đây để đoạn CSS có tác dụng

<div class="hoverimage">
<img src="URL hình ảnh" />
</div>

Đối với trang web bằng Xenforo, các bạn có thể chỉnh sửa các template giống như hướng dẫn trên, ví dụ như chỉnh sửa template EWRblock_RecentNews và EWRblock_RecentNews.css để tạo hiệu ứng với các hình ảnh ngoài Portal. Chúc các bạn thành công!

Nguồn: kyniem.org​

 

[duyminh7799]

Anh ơi em đọc mà không biết chèn vào đâu, anh chỉ rõ dường dẩn giúp em với

 

[GBottom]

chèn chỗ nào vậy trời?

 

[PVS]

bạn có thể chèn vào những css mà bạn muốn có hiệu ứng đó