Duck hunt

CuDemVN.Wap.Sh

- GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam
- AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam
- HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

Admin* RoSino18k *
* 15-08-2017

Nếu như trước đây, để hiển thị văn bản khi di chuột vào hình chúng ta phải thiết kế nó bằng Javascript, tuy nhiên nếu trên trang có nhiều hình ảnh sẽ ảnh hưởng rất lớn đến tốc độ load trang. Ngày nay với sự phát triển của CSS3 việc thiết kế văn bản trong ảnh được thực hiện vô cùng đơn giản với các thuộc tính của CSS. Ta có thể ẩn mô tả để trông gọn gàng hơn, và mô tả sẽ chỉ hiển thị khi bạn di chuột lên bức ảnh. Code chỉ sử dụng đến HTML và CSS nên rất nhẹ không làm giảm tốc độ load trang (tất nhiên hiệu ứng sẽ không được đầy đủ như javascript)



Đầu tiên các bạn hãy xem demo: *http://kusdinks.waphall.com/trac-nghiem-nhanh/ban-thich-gi-trong-cong-vien
Bắt đầu nhé bạn dán code CSS này vào file CSS wap mình:
.idimg .khung{cursor:pointer;position:relative;overflow:hidden}.idimg .khung img{-position:absolute;left:0;-webkit-transition:all 300ms ease-out;-moz-transition:all 300ms ease-out;-o-transition:all 300ms ease-out;-ms-transition:all 300ms ease-out;transition:all 300ms ease-out}.idimg .khung .mota{background-color:rgba(0,0,0,0.8);position:absolute;color:#fff;text-shadow:2px 1px 2px #f00;z-index:100;-webkit-transition:all 300ms ease-out;-moz-transition:all 300ms ease-out;-o-transition:all 300ms ease-out;-ms-transition:all 300ms ease-out;transition:all 300ms ease-out;left:0}.idimg .khung .motaimg{-height:30px;width:100%;display:block;-bottom:-30px;-line-height:25pt;text-align:center}.idimg .khung:hover .motaimg{-moz-transform:translateY(-100%);-o-transform:translateY(-100%);-webkit-transform:translateY(-100%);opacity:1;transform:translateY(-100%)} 

Xong và đây là HTML hiển thị ảnh và khi chạm vào hình sẽ hiển thị văn bản, bạn hãy dán vào chỗ thích hợp trong file HTML của mình:
<div class="idimg"><div class="khung"><img src="link ảnh" alt="tên ảnh"><span class="mota motaimg">text mô tả hoặc title</span></div></div> 

Chỉ với 2 bước đơn giản như trên bạn đã tạo được hiệu ứng hiển thị mô tả khi di chuột vào ảnh rồi đấy. Hãy đọc và trang bị kiến thức về CSS3 cho bản thân để có thể tạo ra nhiều hiệu ứng hấp dẫn hơn nữa nhé, vì CSS3 rất tuyệt mà..
Chúc các bạn thành công!!

Nguồn: kusdinks - kusdinks.waphall.com
↑↑ Lượt xem: 336
score
Đánh giá: 4.5/ 5, 336 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

+

Tổng hợp Filelist Tsukuyomi (AiChat) không timeout, data vô hạn kèm tool post, leech, auto leech đầy đủ

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-336]