Pirms dažām dienām es biju īstenošanas Image Apgāšanās spēkā vietne, kuru es esmu strādā. Lielākā daļa no portfeļa mājas lapas tiek izmantota attēla apgāšanās sekas. Šajā mācību es uzzinātu, kā varat to izveidot vienkāršu Css attēla apgāšanās sekas. Es izmantoju tikai vienu vienkāršu grafiku. Pārējais ir pamata CSS stilu, ar vienkāršu HTML kodu.

Šajā Rounded robežas īpašums neatbalsta IE. Apskatīt Demo

dodiet mums zināt jūsu domas? Ja Jūs ir citas konsultācijas, kuru vēlaties koplietot ar mums, lūdzu, dariet mums to zināmu, pilināšanai komentāru.

Piemērs:

Step # 1 Css Struktūra

vispirms mums izveidot Simple Css kods

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Padding: 0; margin: 0;) body (font: 100% normāla 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 (zemes. jpg); background-position: top;-moz-border-radius: 10px;-WebKit-border-radius: 10px; border: 10px cieto # ccc; font: 13px normālu 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; necaurredzamība:. 60; filter: alpha (necaurredzamības = 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;) 

Step # 2 Html Structure

Tagad mēs veidojam Vienkāršā Html kods

 > <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 pie est Piemērs Teksts, Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Span> </ a> </ div> 

Apskatīt Demo

Sekojiet mums par Twitter, vai parakstīties uz Developers Paradise + RSS Feed par labāko web izstrāde konsultācijas par web.

Iesniegts saskaņā ar: Css, konsultācijas by admin