Fa uns dies jo estava aplicant efecte del rollover de la imatge en un lloc web que estic treballant. La majoria dels llocs web de la cartera està utilitzant efecte del rollover de la imatge. En aquest tutorial aprendrem i vostè com crear bolcada Css imatge efecte. Estic usant només una gràfica senzilla. La resta d'estils CSS és bàsica, amb el codi HTML simple.

Aquesta propietat vora arrodonit que no és compatible amb IE. Veure Demo

faci'ns saber els seus pensaments? Si teniu altres tutorials que voleu compartir amb nosaltres, no dubti en fer-nos saber per caure en un comentari.

Exemple:

Pas # 1 Estructura CSS

primer de crear un simple codi Css

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Padding: 0; margin: 0;) body (font: 100% 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 (tierra. jpg), background-position: top;-moz-border-radius: 10px;-webkit-border-radius: 10px; border: 10px solid # ccc; font: 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; opacitat:. 60; filtre: (alfa opacitat = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . Rollover_img a div (display: none; width: 280px; padding: 5px;) 
  span { display : block ; } . Rollover_img a: hover span (display: block;) 

Pas # 2 en HTML Estructura

Ara creem un simple codi Html

  > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > classe <div "rollover_img" => Títol <a = "Ace Infoway India" href = "http://blog.aceinfowayindia.com">
 <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Sigueu 
 condimentum.  A volutpat.  Vestibulum elit.  Aenean vitae enim eget 
 Tellus bibendum pellentesque.  Sed at est Exemple de text, Lorem ipsum 
 dolor sit amet, consectetur adipiscing elit. </ span>
 </ A> </ div> 

Veure demostració

Siga amb nosaltres en Twitter, o subscriure's als desenvolupadors de Paradís + RSS per als millors tutorials de desenvolupament web a la web.

Filed under: Css, Tutorials per admin