Et par dage siden blev jeg gennemføre Billede rollover-effekten i en hjemmeside, jeg arbejder på. De fleste af porteføljen websteder bruger billede rollover-effekt. I denne tutorial vil jeg lære dig hvordan man laver simple CSS billede rollover-effekt. Jeg bruger kun en simpel grafisk. Resten er grundlæggende CSS styling, med simple HTML-kode.

Dette Afrundet grænse ejendom, der ikke understøttes af IE. View Demo

fortælle os hvad du mener? Hvis du fundet nogle andre tutorials, som du vil dele med os, er du velkommen til at kontakte os ved at droppe i en kommentar.

Eksempel:

Trin # 1 CSS Struktur

Først kunne vi oprette en simpel CSS kode

  ; margin : 0 ; } * (Padding: 0; margin: 0;)
 % normal Arial, Helvetica, sans-serif ; } 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 (jord. 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 ; } . 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; opacitet:. 60; filter: alpha (opacity = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img en span (display: none; width: 280px; padding: 5px,) 
  span { display : block ; } . rollover_img a: hover span (display: block;) 

Trin # 2 Html Struktur

Nu skal vi oprette en simpel HTML-kode

 > <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 = "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 est Eksempel på tekst, Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Span> </ a> </ div> 

Se demo

Følg os på kvidre, eller abonnere på Developers Paradise + RSS Feed for bedste web-udvikling tutorials på nettet.

Filed under: Css, Tutorials af admin