html - Issue with hover effect on image -

नमस्ते मैं img पर होवर प्रभाव बनाने की कोशिश कर रहा हूँ

HTML

  & lt; div & gt; & Lt; img src = "http://placehold.it/350x150" / & gt; & Lt; div class = "link-cont" & gt; & lt; a href = "#" & gt; अधिक जानकारी देखने के लिए यहां क्लिक करें & lt; / a & gt; & lt; / div & gt; & Lt; / div & gt;   
 सीएसएस  
  div {width: 350px; स्थिति: रिश्तेदार; } .link-cont {पृष्ठभूमि: लाल; स्थिति: पूर्ण; नीचे: 0; ऊंचाई: 100 पिक्सेल; अस्पष्टता: 0; संक्रमण: सभी 0.4 एस; } Div: होवर .link-cont {opacity: 1; नीचे: -100px; }   
 मुझे ऐसा कुछ चाहिए, जब उपयोगकर्ता उस पर होवर करें   
  
 कोई मेरी मदद करने के लिए मुझे क्या करने की कोशिश कर रहा है ..  
 जेएसएफआईडी - & gt;   
 
 
 आप ऐसा चाहते हैं, डेमो की जांच  
  div {width: 350px; font-size: 12px; स्थिति: रिश्तेदार; } Div img {padding: 0 10px; } .link-cont {पृष्ठभूमि: लाल; स्थिति: पूर्ण; नीचे: 0; चौड़ाई: 370 पीएक्स; ऊंचाई: 210 पीएक्स; अस्पष्टता: 0; संक्रमण: सभी 0.4 एस; Z-index: -1} div: होवर .link-cont {opacity: 1; नीचे: -40px; } .link-cont एक {अस्पष्टता: 0; } Div: हॉवर। लिंक-एक एक {स्थिति: रिश्तेदार; अस्पष्टता: 1; नीचे: -175px; बाएं: 10px; पृष्ठभूमि: #fff; लाल रंग; text-decoration: कोई नहीं; पैडिंग: 0 10px; }