वीडियो थंबनेल छवि पर एक प्ले बटन ओवरले कैसे करें?

Question

मुझे कुछ div थंबनेल छवियां मिलीं। क्या कोई तरीका है कि मैं थंबनेल छवि पर थंबनेल छवि पर प्ले आइकन डाल सकता हूं, केवल अंगूठे के केंद्र (मेरी थंबनेल छवियों में आइटम इमेज का वर्ग नाम है) सीएसएस का उपयोग करके (मेरे प्ले आइकन में क्लास नाम ओवरलेइकॉन है)?

<div class="ItemLeft"> 


    <div class="Clipping">   
    <a class="ImageLink" href="/videos/id8" title="galaxy"> 
     <img class="ItemImage" src="/Images/video8.jpg" alt="video 8" /> 
     <img class="OverlayIcon" src="/Images/1.png" alt="" /> 
    </a> 
    <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/id1234"><span class="Text">51:57</span></a> 
    </div> 

    <div class="Title"><a href="/videos/id8" title="galaxy">galaxy</a></div> 

    <div class="VideoAge">1 daybefore</div> 

    <div class="PlaysInfo"> broadcast 265</div> 

</div> 

मेरी सीएसएस:

.Item.ItemLeft, .Item.ItemMiddle, .Item.ItemRight 
{ 
    float:left; 
    margin-right:15px; 
} 
.clear 
{ 
    clear:both; 
} 


img.ItemImage { 
    width: 18em; 
    height: 10em; 
} 


.OverlayIcon { 
    position: absolute; 
    top: 40px; 
    left: 65px; 
} 

Answer 1

आप अपने .OverlayIcon पर position: absolute का उपयोग कर सकते हैं।

.ImageLink { 
    height: 300px; 
    width: 350px; 
    position: relative; 
    display: block; 
} 
.ItemImage { 
    height: 300px; 
    width: 350px; 
} 
.OverlayIcon { 
    position: absolute; 
    top: 40px; 
    left: 65px; 
} 

कार्य उदाहरण: http://jsfiddle.net/shodaburp/9nEua/

अद्यतन user1788736 की पहली टिप्पणी

ऊपर समाधान तभी काम करता है सभी ऊंचाइयों ही और निर्धारित हैं के आधार पर उदाहरण के लिए। इसके बाद आपको अपने playButton.png आयाम की ऊंचाई के आधार पर top और left मान समायोजित करने की आवश्यकता होगी।

यदि आप वर्तमान में जो कुछ भी है (एचटीएमएल, सीएसएस, jQuery) के जेएसफ़िल्ड प्रदान कर सकते हैं तो स्थिति को और अधिक सटीक समायोजित करना आसान है।

अद्यतन user1788736 की दूसरी टिप्पणी के आधार पर

मैं एक ही आकार की है कि मेरे सर्वर पर एक डमी छवि (56px एक्स 37px) अपलोड की गई। "? W और ज overlayicon के लिए मूल्यों को खोजने के लिए कैसे" http://jsfiddle.net/shodaburp/k6yAQ/1/

अतिरिक्त जानकारी user1788736 की तीसरी टिप्पणी

जब आप कहते हैं कि के आधार पर: यहाँ अपने बेला के अद्यतन संस्करण है मुझे लगता है कि आप वास्तव में top और left.OverlayIcon के लिए मूल्य की तलाश में हैं। अगर मैं गलत हूं तो मुझे सही करो।

सबसे पहले, यदि आप अपनी साइट पर कोई फ़ंक्शन नहीं करना चाहते हैं जो ज़ूमिंग/विस्तार को सक्षम बनाता है, तो छवियों के लिए इकाई माप के रूप में बस px के साथ चिपके रहें।

आपके जेएसफ़ील्ड अंगूठे आयाम के आधार पर, 12em x 10em192px x 160px के बराबर है।

OverlayIconTop = (ItemImageHeight - OverlayIconHeight)/2 
OverlayIconTop = (160 - 37)/2 = 61.5 

(61 या 62 के दौर के बाद से हम पिक्सल के लिए दशमलव नहीं हो सकता)

OverlayIconLeft = (ItemImageHeight - OverlayIconHeight)/2 
OverlayIconLeft = (192 - 56)/2 = 68 

Answer 2

आप पृष्ठभूमि के रूप में थंबनेल छवि बना सकते हैं और फिर इस पर प्ले बटन छवि है, तो आप भी एक ब्लॉक के रूप में एक विशेषता को परिभाषित करने और पूरे कर सकते हैं क्षेत्र क्लिक करने योग्य

Answer 3

.container{ 
    position: relative; 
    width: 200px; 
} 

.container img{ 
    width: 200px; 
} 

.container .play-icon{ 
    cursor: pointer; 
    position: absolute; 
    top : 50%; 
    left : 50%; 
    transform: translate(-50%, -50%); 
} 

svg:hover #play-svg{ 
    fill: #CC181E; 
} 

:

सूत्र .OverlayIcon के लिए top और left मूल्यों को प्राप्त करने के लिए इस प्रकार है

[svg का उपयोग कर कार्य उदाहरण] http://jsfiddle.net/4L2xea4u/

Answer 4

मैं सिर्फ एक उत्तरदायी लेआउट के लिए इस समस्या के साथ कुश्ती और this demo भर में आया और यह अद्भुत काम किया।