Nơi chia sẻ, học hỏi kinh nghiệm về cuộc sống thời học sinh- sinh viên. Thủ thuật máy tính, blog, photoshop .....
 
Trang ChínhCalendarGalleryTrợ giúpTìm kiếmThành viênNhómĐăng kýĐăng Nhập

Share | 
 

 Hiệu ứng hình ảnh(Phóng to- thu nhỏ) khi rê chuột...!

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
Tác giảThông điệp
Admin
Admin
Admin
avatar

Tổng số bài gửi : 132
Join date : 19/01/2011
Age : 26
Đến từ : Bắc Ninh City

Bài gửiTiêu đề: Hiệu ứng hình ảnh(Phóng to- thu nhỏ) khi rê chuột...!   Mon Jan 24, 2011 1:50 pm

Cách 1:
pạn kần fải kết hợp giữa CSS và HTML !
Hiệu ứng này khá là tốt cho những entry với các tấm ảnh khá to... Nó sẽ resize tấm hình của bạn nhỏ lại cho vừa , khi bạn đưa chuột vào thì hình sẽ trở lại kích thước nguyên thuỷ của chúng !

- Trước tiên bạn cho đoạn code này vào phần CSS của pạn :
#fong_to img {height:150px;}
#fong_to img:hover {height:100%;}


- Khi viết bài , để chèn hình phóng to khi đưa chuột vào thì cho đoạn code này vào bài viết ( nhớ nhấn vào ô HTML nhé ! )



Cách 2:
Đơn giản hơn các bạn chèn code hiệu ứng này vào bài viết là đc :
Thực ra hiệu ứng này cũng không có gì, đơn giản chỉ là tạo thêm 1 ảnh, để khi rê chuột vào từng bài viết sẽ hiển thị ảnh đó lên thôi. Vì thế, các bạn có thể chuẩn bị là các ảnh bất kì, nhưng nên lưu ý là đừng chọn ảnh wá phức tạp, khi rê chuột vào sẽ không đọc được bài viết đâu . Vì thế, nên chọn các ảnh nền trong suốt chẳng hạn, sẽ làm nổi bật bài viết hơn.
Code :

.mod-alist-summary .main-bd li:hover{background:transparent url(Link Ảnh)}

Thay Link ảnh vào nhé !


Thế là xong ^^!
Chúc các pạn thành công Surprised
Về Đầu Trang Go down
Xem lý lịch thành viên http://aotrangvietnam.forumvi.com
 
Hiệu ứng hình ảnh(Phóng to- thu nhỏ) khi rê chuột...!
Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 
Trang 1 trong tổng số 1 trang

Permissions in this forum:Bạn không có quyền trả lời bài viết
Welcome to my forum ♣ºBibiTheWindsº♣ :: -‘๑’- Mạng Xã Hội-Tổng Hợp Các Thủ Thuật Blog-‘๑’- :: ºThủ Thuật Blog Cơ Bảnº-
Chuyển đến