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.
Để 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>
|
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:
Đăng nhận xét