Tạo cửa sổ popup khi di chuột qua ảnh

Bài viết này hướng dẫn cho các bạn thủ thuật cho phép hiển thị cửa sổ popup của ảnh gốc khi ta rê chuột vào. Với vài đoạn code CSS đơn giản chúng ta có thể tạo một cửa sổ popup để hiển thị ảnh rất chuyên nghiệp mà không cần tới Javascript. Xem demo trực...

Bài viết này hướng dẫn cho các bạn thủ thuật cho phép hiển thị cửa sổ popup của ảnh gốc khi ta rê chuột vào. Với vài đoạn code CSS đơn giản chúng ta có thể tạo một cửa sổ popup để hiển thị ảnh rất chuyên nghiệp mà không cần tới Javascript. 

Xem demo trực tiếp ở đây.

Để thực hiển, trước tiên bạn chèn đọan code CSS này vào trước thẻ đóng </head> trong code:

<style type='text/css'>

.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;
}

</style>  

- Dòng code

top: -100px;
eft:100px; 

Chính là vị trí popup sẽ hiển thị ở trong blog của bạn. Hãy điều chỉnh 2 giá trị này để có được vị trí thích hợp nhất.

Và sau cùng là code HTML:

<afont-weight: bold;">img-thumbnail" href="#">
<img src="link ảnh1" border="0" height="98" width="130"/>
<span>
<img src="link ảnh1"/>
</span>
</a>