Jak nałożyć przycisk odtwarzania na miniaturę wideo?

Question

Mam kilka miniaturek div. czy istnieje sposób, aby umieścić ikonę odtwarzania na obrazie miniaturki tylko w środku kciuka (moje miniatury mają nazwę klasy ItemImage) za pomocą css (moja ikona odtwarzania ma overlayicon nazwy klasy)?

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

mój 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

Możesz użyć position: absolute na swoim .OverlayIcon. Na przykład:

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

przykład roboczych: http://jsfiddle.net/shodaburp/9nEua/

aktualizacji na podstawie user1788736 pierwszego komentarza

Powyższe rozwiązanie działa tylko wtedy, gdy wszystkie szczyty są takie same i stałe. Następnie należy dostosować wartości top i w zależności od wysokości wymiaru playButton.png.

Jeśli możesz podać jsFiddle tego, co aktualnie masz (html, css, jQuery), łatwiej jest precyzyjniej dopasować pozycjonowanie.

Aktualizacja oparta na drugim komentarzu user1788736 za

upload obojętne obraz na moim serwerze, który ma taką samą wielkość (56px x 37px). Oto zaktualizowana wersja swojej skrzypce: „jak znaleźć wartości overlayicon w i h” http://jsfiddle.net/shodaburp/k6yAQ/1/

dodatkowych informacji na podstawie user1788736 trzecim komentarzu

Kiedy mówisz Zakładam, że faktycznie szukasz wartości top i left dla .OverlayIcon. Popraw mnie, jeśli się mylę.

Po pierwsze, jeśli nie zamierzasz korzystać z funkcji w witrynie, która umożliwia powiększanie/powiększanie, po prostu trzymaj się z px jako pomiaru jednostkowego dla obrazów.

Na podstawie wymiaru kciuka jsFiddle, 12em x 10em jest odpowiednikiem 192px x 160px.

Formuła aby uzyskać wartości top i left dla .OverlayIcon jest następujący:

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

(okrągłe do 61 lub 62, ponieważ nie możemy mieć po przecinku dla px)

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

Answer 2

Można zrobić miniaturki zdjęcia jako tła, a następnie mieć przycisk PLAY obraz nad nim, można również zdefiniować atrybut jako blok i sprawi, że cały obszar klikalny.

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

[Przykład roboczy przy użyciu svg] http://jsfiddle.net/4L2xea4u/

Answer 4

Po prostu zmagałem się z tym problemem w responsywnym układzie i natrafiłem na this demo i zadziałało to doskonale.