Birkaç gün I Image Rollover Etkisi uygulama olarak önce bir web sitesi I çalışıyorum. Portföy web sitelerinin çoğu görüntü aktarma etkisi kullanıyorsunuz. Bu eğitimde i ne kadar basit Css görüntü aktarma etki oluşturmak için size öğreneceksiniz. Sadece basit bir grafik kullanıyorum. Basit HTML kodu ile dinlenme temel CSS stil.

Bu Yuvarlak sınır özelliği IE tarafından. View Demo desteklenmiyor

bize düşüncelerinizi bildirin? Eğer herhangi bir başka eğitsel ki bizimle paylaşmak istediğiniz bulundu bize bildirmekten çekinmeyin Yorum içinde bırakarak.

Örnek:

Adım # 1 CSS Yapısı

İlk basit bir Css kodu oluştur

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Padding: 0; margin: 0;) body (font: normal 100% 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: (arazi url. 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;) 
  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . a (color: # fff; width: 280px rollover_img; height: 150px; display: block; text-decoration: none;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . bir rollover_img: hover (background: # 000; opacity hover:. 60; filter: alpha (opacity = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . bir span rollover_img (display: none; width: 280px; padding: 5px;) 
  span { display : block ; } . a: hover span rollover_img (display: block;) 

Adım # 2 Html Yapısı

şimdi basit bir HTML kodu oluştur

 > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div class = "rollover_img"> <a title = "http://blog.aceinfowayindia.com"> <span> ipsum dolor sit amet, consectetur adipiscing elit = "Ace Infoway India" href.  Sed condimentum.  In volutpat.  Vestibulum elit.  Aenean eget enim vitae tellus bibendum pellentesque.  Est Örnek Metin, Lorem ipsum dolor de Sed, consectetur adipiscing elit amet. </ Strong> </ a> </ div> 

View Demo

Twitter veya Geliştiriciler Paradise abone bizi izleyin + RSS Feed web'deki en iyi web geliştirme öğreticiler için.

Filed under: Css, yönetici tarafından Tutorials