Wie wird eine Wiedergabetaste über ein Video-Thumbnail-Bild gelegt?

Question

Ich habe ein paar div Thumbnail Bilder. Gibt es eine Möglichkeit, das Play-Symbol über das Thumbnail-Bild nur in der Mitte der Thumbs (meine Thumbnail-Bilder hat Klassenname von ItemImage) mit CSS (mein Play-Symbol hat einen Klassennamen overlayicon)?

<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> 

mein css:

.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

Sie können position: absolute auf Ihrem .OverlayIcon verwenden. Zum Beispiel:

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

Arbeitsbeispiel: http://jsfiddle.net/shodaburp/9nEua/

aktualisiert basierend auf user1788736 ersten Kommentar

Die obige Lösung funktioniert nur, wenn alle Höhen gleich und fixiert sind. Sie müssten dann die Werte top und left basierend auf der Höhe Ihrer playButton.png-Dimension anpassen.

Wenn Sie ein jsFiddle von dem zur Verfügung stellen könnten, was Sie gerade haben (html, css, jQuery), dann ist es einfacher, die Positionierung genauer zu justieren.

-Update basiert auf der user1788736 zweiten Kommentar

hochgeladen ich ein Dummy-Bild auf meinem Server, der die gleiche Größe hat (56px x 37px). Hier ist die aktualisierte Version Ihrer Geige: „Wie Werte finden overlayicon w und h“ http://jsfiddle.net/shodaburp/k6yAQ/1/

Zusätzliche Informationen basierend auf user1788736 dritten Kommentar

Wenn Sie sagen, Ich nehme an, dass Sie tatsächlich nach top und left Wert für .OverlayIcon suchen. Berichtige mich, wenn ich falsch liege.

Wenn Sie nicht beabsichtigen, eine Funktion auf Ihrer Website zu haben, die Zoomen/Vergrössern ermöglicht, bleiben Sie einfach bei px als Maßeinheit für Bilder.

Basierend auf Ihrer jsFiddle-Daumenabmessung entspricht 12em x 10em192px x 160px.

Die Formel, die top und left Werte für .OverlayIcon zu bekommen, ist wie folgt:

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

(Runde 61 oder 62, da wir nicht dezimal für Pixel haben kann)

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

Answer 2

Sie können das Miniaturbild als Hintergrund machen und dann die über sie Play-Taste Bild haben, können Sie auch das ein Attribut als Block definieren und die gesamte machen Bereich anklickbar.

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; 
} 

[Arbeitsbeispiel unter Verwendung von Svg] http://jsfiddle.net/4L2xea4u/

Answer 4

Ich habe gerade mit diesem Problem für ein responsives Layout gerungen und bin auf this demo gestoßen und es hat wunderbar funktioniert.