कुछ ही दिनों में मैं छवि रोल ओवर प्रभाव को लागू किया गया पहले एक वेबसाइट पर मैं काम कर रहा हूँ. पोर्टफोलियो वेबसाइटों के अधिकांश छवि रोल ओवर प्रभाव का उपयोग कर रहे हैं. आप इस ट्यूटोरियल में मैं कैसे सीखना आसान सीएसएस छवि रोल ओवर प्रभावी बनाने के लिए करेंगे. मैं केवल एक साधारण ग्राफिक का उपयोग कर रहा हूँ. बाकी है बुनियादी सीएसएस स्टाइल सरल HTML कोड के साथ,.

इस गोल सीमा संपत्ति का समर्थन किया IE से. देखें डेमो नहीं है

हमें अपने विचारों को जानते हो? यदि आप किसी अन्य ट्यूटोरियल है कि आप हमारे साथ साझा करना चाहते हैं पाया है, हमें पता है बेझिझक एक टिप्पणी में गिर गई.

उदाहरण:

कदम # 1 CSS संरचना

पहले हम एक सरल सीएसएस कोड बनाएँ

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } (Padding 0:; मार्जिन: 0;) शरीर * (font: 100% सामान्य Arial, Helvetica, बिना सेरिफ़;) 
 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:; ऊंचाई 150px:; पृष्ठभूमि छवि: देश (URL. jpg); पृष्ठभूमि-स्थिति: शीर्ष;-moz-border-त्रिज्या 10px:;-webkit-border-त्रिज्या 10px:; सीमा: 10px ठोस # ccc; font: 13px सामान्य Arial, Helvetica, बिना सेरिफ़; रेखा से ऊंचाई 18px:; फ्लोट: छोड़ा; मार्जिन: 0 10px 0 10px;) 
  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . (एक रंग: # fff; चौड़ाई 280px: rollover_img; ऊंचाई 150px:; प्रदर्शन: ब्लॉक, पाठ-सजावट: कोई नहीं;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } एक rollover_img:. (पृष्ठभूमि # 000, अपारदर्शिता: hover: 60.; फिल्टर: अल्फा (= 60 अस्पष्टता);) 
 display : none ; width : 280px ; padding : 5px ; } अंतराल rollover_img. (प्रदर्शन: कोई नहीं; चौड़ाई 280px:; padding 5px:;) 
  span { display : block ; } . एक: hover अवधि rollover_img (प्रदर्शन: ब्लॉक;) 

कदम # 2 Html संरचना

अब हम एक सरल HTML code बनाएँ

 > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div वर्ग = "rollover_img"> <a शीर्षक = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" <span> Lorem ipsum मातम> amet, consectetur adipiscing elit बैठो.  Sed condimentum.  में volutpat.  Vestibulum elit.  Aenean eget enim vitae tellus bibendum pellentesque.  Est. उदाहरण पाठ, Lorem ipsum मातम में Sed amet, consectetur बैठ adipiscing elit. अवधि </> </ a> </ div> 

डेमो देखें

हमें चहचहाना, या डेवलपर्स के स्वर्ग की सदस्यता पर सबसे अच्छा वेब पर वेब के विकास के लिए ट्यूटोरियल + आरएसएस फ़ीड का पालन करें.

के तहत दायर: सीएसएस, व्यवस्थापक द्वारा Tutorials