Come sovrapporre un pulsante di riproduzione a un'immagine di anteprima video?

Question

Ho alcune immagini di anteprima div. c'è un modo in cui posso posizionare l'icona di riproduzione sopra l'immagine di anteprima solo nel centro (le mie immagini in miniatura hanno il nome di classe di ItemImage) usando css (la mia icona di riproduzione ha un nome di classe 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> 

mio 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

È possibile utilizzare position: absolute sul .OverlayIcon. Per esempio:

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

esempio di lavoro: http://jsfiddle.net/shodaburp/9nEua/

aggiornamento sulla base di primo commento di user1788736

La soluzione di cui sopra funziona solo se tutte le altezze sono uguali e fisso. Dovresti quindi modificare i valori e left in base all'altezza della tua dimensione playButton.png.

Se è possibile fornire un jsFiddle di ciò che si ha attualmente (html, css, jQuery), è più facile regolare il posizionamento in modo più accurato.

aggiornamento sulla base di secondo commento di user1788736

ho caricato un'immagine fittizia sul mio server che ha le stesse dimensioni (56px 37px x). Ecco la versione aggiornata del vostro violino: "come trovare i valori per overlayicon w e h" http://jsfiddle.net/shodaburp/k6yAQ/1/

informazioni extra sulla base di terzo commento di user1788736

Quando si dice Presumo che tu stia effettivamente cercando il valore top e left per .OverlayIcon. Correggi se sbaglio.

Prima di tutto, se non si intende avere una funzione sul proprio sito che abilita lo zoom/ingrandimento, è sufficiente specificare px come unità di misura per le immagini.

In base alla dimensione del pollice jsFiddle, 12em x 10em equivale a 192px x 160px.

La formula per ottenere i valori top e left per .OverlayIcon è la seguente:

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

(rotonda a 61 o 62 dal momento che non possiamo avere decimale per px)

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

Answer 2

è possibile effettuare la miniatura come sfondo e poi avere l'immagine pulsante di riproduzione su di esso, si può anche definire l'attributo come un blocco e rendere l'intera area cliccabile.

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

[Esempio di lavoro con svg] http://jsfiddle.net/4L2xea4u/

Answer 4

Ho appena affrontato questo problema per un layout reattivo e mi sono imbattuto in this demo e ha funzionato magnificamente.