Muutama päivä sitten olin täytäntöön Kuva rollover vaikutus verkkosivuilla olen työskennellyt. Suurin osa salkun sivustot käyttävät kuva rollover vaikutus. Tässä opetusohjelmassa aion oppia, miten voit luoda yksinkertaisia Css image rollover vaikutus. Olen käyttäen vain yhtä yksinkertaista grafiikkaa. Loppu on perus CSS-tyyli, yksinkertaisia HTML-koodin.

Tämä pyöristetty rajan kiinteistö ei tue IE. View Demo

meille ajatuksiasi? Jos olet löytänyt muita opetusohjelmia, jotka haluat jakaa kanssamme, voit ottaa meihin yhteyttä pudottamalla kommentin.

Esimerkki:

Vaihe # 1 CSS rakenne

Ensin luodaan yksinkertainen CSS-koodi

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Padding: 0; margin: 0;) body (font: 100% normaali 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 (maa. jpg), tausta-asema: top;-moz-border-radius: 10px;-WebKit-border-radius: 10px; border: 10px solid # ccc; font: 13px normaali 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 (color: # FFF; width: 280px; height: 150px; display: block; text-decoration: none;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img: hover (background: # 000; opasiteetti:. 60; filter: alpha (tiheys = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img span (display: none; width: 280px; padding: 5px;) 
  span { display : block ; } . rollover_img: hover span (display: block;) 

Vaihe # 2 Html rakenne

Nyt voimme luoda yksinkertainen HTML-koodin

  > <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.  In volutpat.  Vestibulum elit.  Aenean eget enim vitae 
 Tellus Bibendum pellentesque.  Sed on arvio esimerkiksi teksti, Lorem ipsum 
 dolor sit amet, consectetur adipiscing elit. </ span>
 </ a> </ span> 

View demo

Seuraa meitä hermostunut, tai tilata Developers Paradise + RSS-syöte paras web-kehitys tutorials Webissä.

Filed under: Css, Tutorials by admin