Hình ảnh phóng to và rõ hơn khi rê chuột đến?

Phải nói CSS thật thú vị để chúng ta khám phá nó. Ngày càng nhiều hiệu ứng mang phong cách đẹp hơn  và phù hợp với khả năng tương thích của các trình duyệt mới, thiết kế blog/web ngày càng trở nên nhiều hơn và sáng tạo hơn. Trước đây ta phải sử dụng Photoshop để tự thêm đổ bóng cho hình ảnh nhưng bây giờ nhờ CSS3 bạn có thể thêm đổ bóng cho tất cả các hình ảnh của bạn một cách tự động và nhanh chóng. Chúng ta sẽ tìm hiểu làm thế nào để giảm kích thước của hình ảnh lớn và khi rê chuột đến hình ảnh trở về kích thước bạn đầu. Mình chắc chắn bạn sẽ thấy rất thú vị với thủ thuật này

Demo

1. Các bước thực hiện như sau
2. Vào blogger > Mẫu > Chỉnh sửa HTML
3. Chèn code bên dưới phía trên thẻ ]]></b:skin> sau đó lưu lại

.TVL-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.TVL-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

• Nếu muốn tăng/giảm kích cỡ hình ảnh thu nhỏ bạn thay đổi thông số 0.7
• Nếu muốn tăng/giảm độ mờ hình ảnh thu nhỏ bạn thay đổi thông số 0.5

Vậy coi như bạn đã hoàn thành, từ giờ khi viết bài nếu muốn hình ảnh trong bài viết xuất hiện với hiệu ứng này, bạn sử dụng code sau

<div class="TVL-CSS3">
<img src="Link hình ảnh" />
</div>

Nếu muốn bạn có thể chèn nhiều ảnh cùng một lúc bằng cách sử dụng code sau

 <div class="TVL-CSS3">
<img src="Link hình ảnh1" />
<img src="Link hình ảnh2" />
<img src="Link hình ảnh3" />
</div>

Hi vọng bài viết sẽ giúp được bạn trong công việc thiết kế blog. Chúc bạn một ngày may mắn!