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ữ
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
 |  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: 3538 
Đánh giá: 4.5/ 5, 3538 bình chọn
| - Chia sẻ: |   |
Link:
Còn “nhiều” Lắm!