Nhận xét mới

N a p g a m e d t . c o m

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>
Share:

Add Comment

9 nhận xét:

  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

-->