Et par dager siden var jeg implementere Bilde Rollover effekt på en nettside jeg jobber på. Det meste av porteføljen nettsteder bruker bildet rollover effekt. I denne opplæringen jeg vil lære deg hvordan du kan lage enkle Css bildet rollover effekt. Jeg bruker bare en enkel grafikk. Resten er grunnleggende CSS, med enkel HTML-kode.

Dette Avrundet grensen eiendommen ikke støttes av IE. View Demo

La oss dine tanker? Hvis du fant noe annet opplæringsprogrammer som du vil dele med oss, kan du gjerne gi oss beskjed ved å slippe i en kommentar.

Eksempel:

Step # 1 Css Struktur

vi først lage en enkel CSS-kode

 ; 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 (land. 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; dekkevne:. 60; filter: alpha (opacity = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img en spennvidde (display: none; width: 280px; padding: 5px;) 
  span { display : block ; } . rollover_img a: hover span (display: block;) 

Step # 2 Html Struktur

nå skal vi lage en enkel HTML-kode

  > <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 at est Eksempel Tekst Lorem ipsum 
 dolor sit amet, consectetur adipiscing elit. </ span>
 </ a> </ div> 

Se demo

Følg oss på Twitter, eller abonnere på Developers Paradise + RSS Feed for beste web-utvikling tutorials på nettet.

Arkivert under: Css, Tutorials av admin