Làm thế nào để tạo hiệu ứng Rollover Simple Css Hình | Developers Paradise Blog Bởi Ace Infoway Ấn Độ |

Làm thế nào để Tạo Simple Css Hình Rollover Effect

Một vài ngày trước, tôi đã được thực hiện hiệu ứng Rollover Image trong một trang web tôi là làm việc trên. Hầu hết các trang web đang sử dụng danh mục đầu tư hiệu quả hình ảnh rollover. Trong bài này tôi sẽ hướng dẫn bạn tìm hiểu làm thế nào để tạo hiệu ứng rollover Css đơn giản, hình ảnh. Tôi đang sử dụng chỉ có một đơn giản đồ họa. Phần còn lại là cơ bản CSS phong cách, với mã HTML đơn giản.

image-rollover-heading

Tròn biên giới bất động sản này không được hỗ trợ bởi trình duyệt IE xem Demo.

cho chúng tôi biết suy nghĩ của bạn? Nếu bạn tìm thấy bất kỳ hướng dẫn khác mà bạn muốn chia sẻ với chúng tôi, hãy cho chúng tôi biết bằng cách thả trong một chú thích.

Ví dụ:

Bước 1 Css Cơ cấu tổ chức

lần đầu tiên chúng tôi tạo một đơn giản Css mã


  ; margin : 0 ; } * (Padding: 0; margin: 0;)
 % normal Arial, Helvetica, sans-serif ; } body (font: 100% bình thường Arial, Helvetica, sans-serif;) 


  . rollover_img (
 ; width: 280px;
 ; height: 150px;
 ( land .jpg ) ; background-image: url (đất jpg).; 
 ; background-position: top;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 #ccc ; border: 10px solid # ccc;
 Arial, Helvetica, sans-serif ; font: normal 13px Arial, Helvetica, sans-serif;
 line-height: 18px;
 float: left;
 0 ; margin: 0 10px 10px 0;
 ) 


  rollover_img một. (
 ; color: # fff;
 ; width: 280px;
 ; height: 150px;
 ; display: block;
 ; text-decoration: none;
 ) 


  { rollover_img a: hover. (
 ; background: # 000;
 opacity:. 60;
 opacity= 60 ) ; filter: alpha (opacity = 60);
 ) 


  . rollover_img một khoảng (
 ; display: none;
 ; width: 280px;
 padding: 5px;
 ) 


  span { rollover_img span hover một: (.
 ; display: block;
 )

Bước 2 Html Cơ cấu tổ chức

bây giờ chúng tôi tạo một đơn giản Html mã


  > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <div class = "rollover_img"> <a Tiêu đề = "Ace Infoway India" href = "http://blog.aceinfowayindia.com">
 <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Sed 
 condimentum.  Trong volutpat.  Vestibulum elit.  Aenean eget enim vitae 
 bibendum pellentesque tellus.  Sed tại văn bản Ví dụ ước tính, Công ty Cổ 
 elit dolor sit amet, consectetur adipiscing </. span>
 </ a> </ div>