Hiệu ứng cửa sổ "Popup" cho ảnh

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Trước đây mình đã giới thiệu đén các bạn một số hiệu ứng cho hình ảnh như: Lightbox, Imagewarp... Hôm nay mình xin chia sẻ cùng các bạn thủ thuật làm hiệu ứng cho ảnh bằng css. Ở đay mình sẻ tạo một cửa sổ Popup cho hình ảnh, tức là ban đầu bạn có hình ảnh dạng thumbnail và sau khi rê chuột vào ảnh thumbnail đó thì có một cửa sổ hiện ra kích cở ảnh đầy đủ, khi bạn rê chuột ra khỏi ảnh thumb cửa sổ sẽ biến mất ngay. Bạn hãy xem ảnh minh họa bên dưới sẽ thấy rỏ.


Hình ảnh nminh họa

☼ Tiến hành thủ thuật

1. Đăng nhập Blogspot
2. Vào bố cục chọn chỉnh sửa HTML (Edit HTML)
3. Thêm vào trước thẻ ]]></b:skin> đoạn code bên dưới
.thumbnail {
position: relative;
z-index: 0;
}

.thumbnail span {
position: absolute;
background: lightyellow; /*Đây là màu nền của cửa sổ popup*/
padding: 3px;
left: -1000px;
border: 1px dashed #006666; /*đường viền của sổ popup*/
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail:hover span {
visibility: visible;
top: auto;
left: auto;
}


Chỉnh sửa code: Bạn hãy dựa vào chú thích ở trong code để chỉnh sửa, sau khi chỉnh sửa xong hãy xóa đi những dòng chú thích đó.

4. Sau khi chỉnh sửa xong save template lại.
- Để sử dụng hiệu ứng này cho ảnh trong bài đăng hay trên blog, bạn hãy sử dụng code bên dưới
<a class="thumbnail" href="http://www.traidatmui.com/"><img width="150px" height="96px" src="http://lh6.ggpht.com/_BTztXRwC9ik/S4tj4lnAcrI/AAAAAAAAANw/vwXqEQJYh-c/s640/2009_11_21%5E13_31_42.jpg" /><span><img src="http://lh6.ggpht.com/_BTztXRwC9ik/S4tj4lnAcrI/AAAAAAAAANw/vwXqEQJYh-c/s640/2009_11_21%5E13_31_42.jpg" /></span></a>

Chỉnh sửa:
- Link màu xanh dương (http://www.traidatmui.com/) là đường link dẫn tới khi click vào ảnh, bạn hãy thay lại cho phù hợp.
- Hai link màu cam chính là link ảnh hai link này phải giống nhau thì ảnh mới hiển thị đúng ảnh thực của ảnh thumb ban đầu, hãy thay thành ảnh bạn muốn tạo hiệu ứng.

Chúc bạn thành công

Loading...

3 nhận xét

  1. Theo yêu cầu của bạn codonpro mình xin hướng dẫn thêm. Nếu bạn muốn khi rê chuột vào ảnh sẽ hiển thị một thông tin về ảnh thì bạn chỉ việc thay dòng code trong bước4 thành.

    <span>Nội dung thông tin về ảnh của bạn</span>

    Thân chào!

    Trả lờiXóa
  2. code này hay đấy bạn, tôi ko ngờ với css mà làm dc popup bạn NÉT lắm

    Trả lờiXóa