Paar päeva tagasi olin rakendamise Image Ümberminekuoht Toime kodulehel Mul töötab. Enamik portfelli veebilehed kasutavad pilt ümbermineku mõju. Sel juhendaja i õpivad, kuidas luua lihtne Css pildi ümbermineku mõju. Ma kasutan ainult ühe lihtsa graafika. Ülejäänu on põhilised CSS stiil, lihtsate HTML-koodi.

See Ümardatud piiri vara ei toeta IE. View Demo

Andke meile teada oma mõtteid? Kui olete leidnud mõne muu tutorials, et soovite meiega jagada, võid vabalt meiega ühendust lohistamine kommenteerida.

Näide:

Samm # 1 Css struktuur

Esimene loome Antud Css kood

  ; margin : 0 ; } * (Padding: 0; margin: 0;)
 % normal Arial, Helvetica, sans-serif ; } keha (font: 100% tavaline Arial, Helvetica, sans-serif;) 


  . Rollover_img (
 ; laius: 280px;
 ; kõrgus: 150px;
 ( land .jpg ) ; background-image: url (maa. jpg); 
 ; background-asukoht: ülemine;
 -Moz piiriülese raadiusega: 10px;
 -WebKit-piiri-raadius: 10px;
 #ccc ; border: 10px solid # ccc;
 Arial, Helvetica, sans-serif ; font: 13px tavaline Arial, Helvetica, sans-serif;
 line-height: 18px;
 float: left;
 0 ; margin: 0 10px 10px 0;
 ) 


 color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . Rollover_img (color: # fff; laius: 280px; kõrgus: 150px; kuva: ploki; teksti viimistlemiseks: none;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . Rollover_img: hover (background: # 000; läbipaistmatus:. 60; filter: alpha (läbipaistmatuse = 60);) 
  display : none ; width : 280px ; padding : 5px ; } . Rollover_img span (kuva: none; laius: 280px; padding: 5px;) 
 span { display : block ; } . Rollover_img: hover span (kuva: ploki;) 

Samm # 2 Html struktuur

Nüüd loome lihtsate HTML-koodi

 > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <Div class = "rollover_img"> < title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com"> <span> Lorem ipsum dolor istuda Ametil, consectetur adipiscing elit.  Sed condimentum.  In volutpat.  Vestibulum elit.  Aenean eget enim vitae Tellus bibendum pellentesque.  Sed on est. Näide Tekst, Lorem ipsum dolor istuda Ametil, consectetur adipiscing elit. </ Span> </ a> </ div> 

Vaata demo

Jälgi meid vidistama , või tellida Developers Paradise + RSS Feed parima veebiarendust õpetused veebis.

Filed under: Css , Tutorials admin