Thứ Tư, 30 tháng 1, 2013

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

Các bước thực hiện như sau
Vào blogger > Mẫu > Chỉnh sửa HTML
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;
}