Cu câteva zile în urmă, am fost de punere în aplicare Imagine efect rollover într-un site web I'm working on. Cele mai multe dintre site-uri web portofoliu sunt utilizaţi imaginea efect rollover. In acest tutorial am vor învăţa cum să creaţi imagini simple CSS efect rollover. I sînt, folosind doar un grafic simplu. Restul este de bază CSS styling, cu cod HTML simplu.

Această proprietate rotunjite de frontieră nu este susţinută de IE. Vezi Demo

-ne gandurile tale? Dacă aţi găsit orice alte tutoriale pe care doriţi să le împărtăşiţi cu noi, nu ezitaţi să ne înştiinţaţi prin cădere într-un comentariu.

Exemplu:

Pasul # 1 CSS Structura

prima vom crea un cod de simple CSS

 ; 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 (teren. jpg); background-position: top;-moz-border-radius: 10px;-WebKit-border-radius: 10px; border: 10px solid # ccc; font: 13px Arial normal, 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; opacitate:. 60; filter: alpha (opacity = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img-un interval de (display: none; width: 280px; padding: 5px;) 
  span { display : block ; } . rollover_img a: hover span (display: block;) 

Pasul # 2 Html Structura

acum vom crea un cod HTML simplu

 > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. clasa <div "rollover_img" => titlu <a = "Ace Infoway India" href = "http://blog.aceinfowayindia.com"> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Sed condimentum.  În volutpat.  Vestibulum elit.  Aenean vitae eget enim bibendum tellus pellentesque.  Sed la example text est, lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Span> </ a> </ div> 

Vezi Demo

Urmaţi-ne pe Twitter, sau abona la Paradise Developers + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.

Filed under: Css, Tutoriale de admin