För några dagar sedan var jag genomföra Effekt Image Rollover på en webbplats som jag arbetar på. De flesta av portföljen webbplatser använder effekt bild välta. I denna tutorial jag ska lära dig hur man skapar enkla Css effekt bild välta. Jag använder bara en enkel grafik. Resten är grundläggande CSS, med enkla HTML-kod.

Detta Rundade gränsen egendom som inte stöds av IE. View Demo

Låt oss veta dina tankar? Om du hittat någon annan handledningar som du vill dela med oss får du gärna meddela oss genom att släppa i en kommentar.

Exempel:

Steg # 1 CSS Struktur

Först skall vi skapa en enkel CSS-kod

 ; 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: 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;) 

Steg # 2 Html Struktur

vi nu skapa en enkel HTML kod

 > <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 at est Exempel Text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Span> </ a> </ div> 

Visa demo

Följ med oss på Twitter, eller prenumerera på Developers Paradise + RSS-flöde för bästa tutorials webbutveckling på nätet.

Filed under: Css, Tutorials av admin