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

Thứ sáu - 02/09/2016 05:39
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.
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 (Cụ thể trong Nukeviet tôi sẽ thêm vào file /themes/default/css/style.css
.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>
 

Nguồn bài viết: Sưu tầm có chỉnh sửa

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Thống kê truy cập
  • Đang truy cập9
  • Hôm nay101
  • Tháng hiện tại5,621
  • Tổng lượt truy cập53,309
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây