Një ditë më parë unë isha zbatimin Image Rollover Effect në një faqe interneti unë jam duke punuar. Shumica e portofolit janë duke përdorur faqet e internetit rollover efekt të imazhit. Në ky i tutorial do të mësoni se si të krijoni të thjeshtë rollover Css efekt të imazhit. Unë jam duke përdorur vetëm një grafik të thjeshtë. Pjesa tjetër është bazë styling CSS, HTML me kod të thjeshtë.

Kjo pronë Rounded kufirit nuk është i mbështetur nga IE. View Demo

na tregoni mendimet tuaja? Nëse keni gjetur ndonjë mësime të tjera që ju dëshironi të ndani me ne, të ndjehen të lirë të na njohin me rënie në një koment.

Shembull:

# 1 Hapi Css Struktura

e parë kemi të krijojë një kod të thjeshtë Css

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Padding: 0; margin: 0;) trupit (font: normal 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 (tokës. jpg); background-position: top;-moz-border-radius: 10px;-webkit-border-radius: 10px; border: solid 10px # ccc; font: normal 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; opacity:. 60; filter: (perde alfa = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img një span (display: none; width: 280px; padding: 5px;) 
  span { display : block ; } . rollover_img a: span hover (display: block;) 

# 2 Hapi Html Struktura

tani ne kemi krijuar një kod të thjeshtë Html

  > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > klasë <div "rollover_img" => titullin <a = "Ace Infoway href India" = "http://blog.aceinfowayindia.com">
 <span> Lorem ipsum dolor ulem Amet, consectetur adipiscing elit.  Sed 
 condimentum.  Në volutpat.  Vestibulum elit.  Aenean eget enim vitae 
 tellus bibendum Pellentesque.  Shembull est sed në Tekst, Lorem ipsum 
 amet dolor ulem elit, consectetur adipiscing elit. </ span>
 </ a> </ div> 

Shiko Demo

Ndiqni na Twitter, ose të regjistroheni Xhennet Developers + RSS Feed për zhvillim më të mirë tutorial web në internet.

Paraqitur sipas: Css, Tutorials nga admin