Pred nekaj dnevi sem bil za izvajanje Image Rollover Effect na spletni strani delam naprej. Večina portfelja spletnih strani uporabljajo sliko prevračanjem učinek. V tem Tutorial sem vas bodo naučili, kako ustvariti preprosto Css image prevračanjem učinek. Rabim samo eno enostavno grafiko. Ostalo je osnovni CSS styling, s preprosto kodo HTML.

Ta lastnost Rounded meje ne podpira IE. View Demo

Sporočite nam svoje misli? Če si našel druge Vadnice, ki jih želite deliti z nami, vas prosimo, da nas obvestite, ki ga spustite komentar.

Primer:

Korak # 1 Css Struktura

Najprej smo ustvarili kodo, Simple Css

  ; margin : 0 ; } * (Padding: 0; margin: 0;)
 % normal Arial, Helvetica, sans-serif ; } body (font: 100% normalne 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, višina: 150px; background-image: url (land. jpg); background-position: top;-moz-border-radius: 10px;-webkit-border-radius: 10px; border: 10px trdna # CCC; font: 13px normalno 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 (color: # fff; width: 280px, višina: 150px; display: block; text-decoration: none;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img: hover (background: # 000; motnosti:. 60; filter: alpha (opacity = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img span (display: none; width: 280px; padding: 5px;) 
  span { display : block ; } . rollover_img: hover span (display: block;) 

Korak # 2 Html Struktura

Zdaj smo ustvarili kodo, Simple Html

 > <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 bibendum vitae tellus pellentesque.  Sed est na primer Besedilo, Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Span> </ a> </ div> 

View Demo

Sledite nam na Twitter, ali se naročite na Developers Paradise + RSS Feed za najboljši tutorski web development na spletu.

Pila pod: Css, Tutorials by admin