Pred pár dňami som sa vykonáva Obrázok prevrátení Vplyv na internetových stránkach I'm working on. Väčšina z portfólia webových stránok používate obrázok rollover efekt. V tomto tutoriálu sa budem učiť, ako vytvoriť jednoduchý obrázok CSS rollover efekt. I am using len jeden jednoduchý grafický. Zvyšok je základná CSS štýl, s jednoduchou HTML kód.

Zaoblená hranice tohto majetku nie je podporovaný IE. Prezrieť demo

povedzte nám vaše myšlienky? Ak ste našiel iné návody, ktoré chcete zdieľať s nami, neváhajte a dajte nám vedieť o kvapkanie komentár.

Príklad:

Krok # 1 Css štruktúra

Najprv sme vytvoriť jednoduchý CSS

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Padding: 0; margin: 0;) body (font: 100% normálne 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 (půda. jpg); background-position: top;-moz-border-radius: 10px;-webkit-border-radius: 10px; border: 10px pevné # ccc; font: 13px normálne 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; height: 150px; display: block; text-decoration: none;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . Rollover_img: hover (background: # 000; opacity:. 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;) 

Krok # 2 Html Štruktúra

Teraz sme sa vytvoriť jednoduchý HTML kód

  > <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.  V volutpat.  Vestibulum elit.  Aenean eget enim vitae 
 tellus bibendum pellentesque.  Sed est Príklad na text, Lorem ipsum 
 dolor sit amet, consectetur adipiscing elit. </ span>
 </ A> </ div> 

Prezrieť demo

Sledujte nás na rozechvění, alebo objednať na Developers raj + RSS feed pre najlepšie výučbové vývoj webových aplikácií na webe.

Súbor pod: Css, Návody admin