Beberapa hari yang lalu saya melaksanakan Image Rollover Efek di website saya kerjakan. Sebagian besar situs web portofolio menggunakan efek rollover image. Dalam tutorial ini saya akan belajar bagaimana caranya membuat gambar Css sederhana efek rollover. Saya menggunakan hanya satu grafis sederhana. Sisanya adalah dasar styling CSS, dengan kode HTML sederhana.

Perbatasan Rounded properti ini tidak didukung oleh IE. Lihat Demo

mari kita tahu pikiran Anda? Jika Anda menemukan tutorial lain yang Anda inginkan untuk berbagi dengan kami, silakan beritahu kami dengan menjatuhkan dalam komentar.

Contoh:

Langkah # 1 Css Struktur

pertama-tama kita menciptakan sebuah kode Css Wikipedia

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Padding: 0; margin: 0;) body (font: 100% normal Arial, Helvetica, sans-serif;) 
 width : 280px ; height : 150px ; background-image : url ( land .jpg ) ; background-position : top ; -moz-border-radius : 10px ; -webkit-border-radius : 10px ; border : 10px solid #ccc ; font : 13px normal Arial, Helvetica, sans-serif ; line-height : 18px ; float :left ; margin : 0 10px 10px 0 ; } . rollover_img (width: 280px; height: 150px; background-image: url (tanah. jpg); background-position: top;-moz-border-radius: 10px;-WebKit-border-radius: 10px; border: 10px solid # ccc; font: normal 13px Arial, Helvetica, sans-serif; line-height: 18px; float: left; margin: 0 10px 10px 0;) 
  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . rollover_img a (color: # fff; width: 280px; height: 150px; display: block; text-decoration: none;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img a: hover (background: # 000; opacity:. 60; filter: alpha (opacity = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img a span (display: none; width: 280px; padding: 5px;) 
  span { display : block ; } . rollover_img a: hover span (display: block;) 

Langkah # 2 Struktur Html

sekarang kita membuat kode Html Sederhana

  > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <div class = "rollover_img"> <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com">
 <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Sed 
 condimentum.  Dalam volutpat.  Vestibulum elit.  Aenean eget enim vitae 
 tellus bibendum pellentesque.  Sed at est Contoh Teks, Lorem ipsum 
 dolor sit amet, consectetur adipiscing elit. </ span>
 </ a> </ div> 

Lihat Demo

Ikuti kami di Twitter, atau berlangganan ke surga + Developers RSS Feed untuk pengembangan web terbaik tutorial di web.

Filed under: Css, Tutorial oleh admin