Hiệu ứng thu nhỏ chữ và tự động phóng to ảnh khi để chuột vào

Code giúp thu nhỏ chữ và ảnh. Khi di chuột đến, chữ và ảnh sẽ tự động chở về đúng kích cỡ.
Để làm được như vậy, bước đầu tiên, ta copy code này, dán vào phần css
• Code này dán vào css để sử dụng được hiệu ứng phóng to ảnh, thu nhỏ chữ:
Với chữ :

#blog_quote {
font-size:5px;
font-style:italic;
color:#FF99FF;
background:#000066;
}
#blog_quote:hover {
font-size:12px;
font-weight:bold;
font-style:normal;
color:#CC99AA;
background:transparent;
}

Với ảnh :

#blog_img img {
height:100px;
}
#blog_img img:hover {
height:100%;
}

• Code này dán vào bài viết để tạo hiệu ứng tự động thu nhỏ chữ trong những bài viết dài:

<div id="blog_quote">nội dung đoạn text muốn thu nhỏ</div>

Đây là sản phẩm của code trên, hãy để chuột lên chữ để xem hiệu ứng:

Ta đã vào tình yêu không đối chất
Tuyệt vọng nào ta trót lỡ trao em
Một lần đi có bao lời chân thật
Ta vẫn từ trong ánh mắt xa xăm

Chính rằng ta một người chưa buông ý
Chôn cuộc tình vào đáy biển mênh mông
Có lần qua trong một chiều suy nghĩ
Tình yêu nàng tựa gió mát thênh thang

Nhưng giờ đây bao làn hương đã tắt
Như trăng tàn, nguyệt lạnh, vỡ hình trăng
Bước chân đi; mắt nàng trông hiu hắt
Lời ngọt mềm, thuở ấy, hỏi ai mang?

Em có thương một chút gì dường mất?
Chớ mang sầu chất ngất tuổi xuân em
Hãy xem ta: chiếc đèn khuya đã tắt
Ánh lửa mờ chẳng ngự trái tim em?

• Để sử dụng hiệu ứng này cho bức ảnh ta dùng code:

<br /><div id="blog_img"></div>

Đây là sản phẩm của code trên, hãy để chuột lên bức ảnh để xem hiệu ứng:

Chúc vui :D !

Các bài liên quan