Phóng to hình ảnh với CSS3

Hiệu ứng phóng to hình ảnh khi rê chuột với CSS3 . Sử dụng trong việc tạo Gallery gọn gàng và linh hoạt .

Thích hợp trên các trình duyệt : Firefox 3.6+ , G.Chrome , Safari 4+ , Opera 9.5+ .

Chống chỉ định trên IE .

Demo :





Sử dụng :
Chèn đoạn CSS bên dưới vào temp hoặc trực tiếp trong bài viết .
<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>

Thay thế các link hình bên dưới bằng hình ảnh cần sử dụng cho hiệu ứng trong bài viết
<div class="hovergallery">
<img src="http://4.bp.blogspot.com/-eK6vk5_t4nk/TyzjiCLd06I/AAAAAAAABUY/-rAfmnE4w5I/s1600/llogo.jpg" /> <img src="http://4.bp.blogspot.com/--kT8eaZnmdg/Tyzjix0-SzI/AAAAAAAABVA/fTFz-lYG3CQ/s1600/llogo-3.jpg" />
<img src="http://4.bp.blogspot.com/--kT8eaZnmdg/Tyzjix0-SzI/AAAAAAAABVA/fTFz-lYG3CQ/s1600/llogo-3.jpg" /> <img src="http://4.bp.blogspot.com/-eK6vk5_t4nk/TyzjiCLd06I/AAAAAAAABUY/-rAfmnE4w5I/s1600/llogo.jpg" />
</div>
Từ khoá:
Blogger 2/04/2012

9 Bình Luận

  1. bác L dạo này hay thích CSS3 nhỉ:D

    Trả lờiXóa
  2. @Quang : Vâng , dạo này máu cái thể loại này nên ngồi vọc bác ợ :D

    Trả lờiXóa
  3. Mượt mà tốn công nhỉ :(

    Trả lờiXóa
  4. @Đing Kiu Truê : Vậy mà tốn công , chèn CSS vào bài viết rồi thêm mỗi thẻ DIV trc tag hình là xong .

    Trả lờiXóa
  5. Em chỉ thích bôi đen ==> Copy ==> Paste :))

    Trả lờiXóa
  6. Hiệu ứng phóng to này rất mượt, cảm ơn bác đã chia sẻ nhé!

    Trả lờiXóa
  7. Tối qua thấy pác dùng template khác mừ

    Trả lờiXóa
  8. @May Thy : Cũng là học hỏi thôi bác ^^
    @Ngọn lửa nhỏ : Đêm wa phát hiện 1 vài lỗi em cho nó quay về Default temp luôn cho nó lành :D

    Trả lờiXóa
  9. chẹp hiệu ứng tuyệt ^^~
    em cũng rất thích CSS3 :D hi vọng anh sẽ share nhiều code thêm nữa ^^~

    Trả lờiXóa

Hãy để lại comment, góp ý để blog hoàn thiện hơn

Vui lòng gõ có dấu khi sử dụng tiếng việt

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước

Sử dụng ngôn ngữ có văn hóa khi bình luận

Thiết kế web với Blogger - Blogspot

Thiết kế Responsive, SEO Friendly Blogger Templates, Bố cục gọn gàng, dễ dàng chỉnh sửa.

Thủ thuật Blogspot - Blogger

Free template blogger, Chia sẻ thủ thuật Blogger - Seo Templates, Tutorial CSS3 - HTML5 Blogger

Dịch vụ Blogspot

Tối ưu hóa SEO, tùy biến Template blogspot thân thiện với các công cụ tìm kiếm phổ biến