Xem hình ảnh dạng Popup

Tiếp tục những bài viết về CSS .

Hôm nay , bài viết này trình bày kiểu xem hình ảnh dạng Popup khi rê chuột vào bằng CSS . Khá gọn và tiết kiệm diện tích , thích hợp trong việc tạo blog Gallery .

Hiển thị tốt nhất trên Firefox , G.Chrome , Safari , Opera .




DEMO


vanlinhex.com

vanlinhex.com

vanlinhex.com

vanlinhex.com

Rất đơn giản chỉ cần chèn đoạn mã CSS bên dưới trước </head> trong template hoặc chèn trực tiếp vào bài viết :
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ 
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ 
visibility: visible;
top: 0;
left: 60px; 
}
</style>

Và khi post hình sử dụng mẫu bên dưới :
<a class="thumbnail" href="#thumb"><img src="thumbnail" width="100px" height="100px" border="0" /><span><img src="Link ảnh gốc" />
Text</span></a>
Chỉ cần thay vào những phần màu đỏ
Thumbnail : link ảnh nhỏ
100px , 100px : kích thước ảnh nhỏ (thumbnail)
Link ảnh gốc : ảnh sau khi rê chuột
Text : chú thích ...

Ngoài ra cũng có thể áp dụng dạng Popup này cho Text :
Text 1
Text
- Text 2
Text
- Text 3
Text
- Text 4
Text
Từ khoá:
Blogger 2/07/2012

14 Bình Luận

  1. mấy cái này làm thủ công quá bác nhỉ:(

    Trả lờiXóa
  2. @Quang : Đơn giản và nhanh mà :)

    Trả lờiXóa
  3. Cộng Tác Viên Mới: VANLINHEX :D

    Trả lờiXóa
  4. Hay ho thiệt đó nhỉ :) Khám phá blogspot nhiều thú vị thật

    Trả lờiXóa
  5. @Đing Kiu Truê : Cộng tác viên ko thường trực :D
    @TDT : Còn nhiều thứ lắm hay ho lắm :D
    P/s : khám thôi đừng phá :D

    Trả lờiXóa
  6. Cái confirm dở hơi. .

    Trả lờiXóa
  7. @ngoc :Bạn nói gì mình không hiểu

    Trả lờiXóa
  8. ^^ ! Bài viết hay đấy ..

    Nhưng thêm z-index cho .thumbnail span nữa nhẽ, nó sẽ không bị lấp ở nhiều site có z-index cao hơn :D

    Trả lờiXóa
  9. Mà bỏ cái này đi nhé, Free Backlinks Exchange chỗ thống kê ấy. Toàn bị bắt fill id và pass thôi, ức chế lắm..

    [img]http://ni9.upanh.com/b1.s24.d2/f0e75ce73e369a2f5c9034a1aea7f412_40814259.capture.png[/img]

    Trả lờiXóa
  10. @Anh N.C :Tại em toàn dùng GC nên ko biết :D
    Đã bỏ

    Trả lờiXóa
  11. hé hé bác truê dạo này kinh nhóe, đến FF nó còn bảo mật thế này thì...:D

    Trả lờiXóa
  12. Tại chèn cái backlinks kia vào lên bị thôi

    Trả lờiXóa
  13. @Đing Kiu Truê : Từ lúc hắn chèn cái backlink thấy AV liên tục hú :))

    Trả lờiXóa
  14. Hay, cái này hay nè, chắc phải mần nó cho blog mới được. Có nhiều bài cần phải hiển thị ảnh kiểu này. Chỉ có 1 cái hơi dở là mần thủ công quá, làm từng ảnh thì hơi bị lâu nhưng vì cái đẹp nên ráng mần thui. Like :)

    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