Trang chủ > Thủ thuật blog > Hiệu ứng cửa sổ popup cho ảnh

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

Với một thủ thuật nhỏ bạn có thể tạo được một cửa sổ popup cho ảnh.Tức là một cửa sổ hiển thị kích thước của ảnh gốc khi rê chuột vào ảnh thumbnail.Đó là hiệu ứng khá đơn giản nhưng rất đẹp và chuyên nghiệp.

Đây là hình ảnh minh họa thủ thuật




Sau đây là cách thực hiện
1.Đăng nhập blog
2.Vào bố cục và vào chỉnh sửa code HMTL
3.Tìm đến thẻ
và chèn đọan code CSS bên dưới vào trước dòng code

.img-thumbnail{
position: relative;
z-index: 0;
}

.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.img-thumbnail span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.img-thumbnail span img{
border-width: 0;
padding: 2px;
}

.img-thumbnail:hover span{
visibility: visible;
top: -100px;
left:100px;
}

Đoạn code màu xanh trên chỉ vị trí của cửa sổ popup,bạn có thể chỉnh tùy ý
4.Xong save template lại
Và đây là code bạn dùng khi soạn thảo:

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

Advertisements
Chuyên mục:Thủ thuật blog
  1. Không có bình luận
  1. No trackbacks yet.

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s

%d bloggers like this: