応答ボタンで画像を再生します。

Question

レスポンス画像の上に再生ボタンを表示しようとしています。ボタンは96x96ピクセルで画像の中央にある必要があります。

多くの方法を試しましたが、常に悪いです。私はフレックスデザインについて何かを読んだり、フレックスで行うのは簡単でしょうか？

5〜10個の要素があるので、私は本当に簡単な方法が必要です。

おかげで、あなたがイメージに親要素を与える場合、あなたは親の中央にオーバーレイ親の背景画像や位置、それを作ることができます

Answer 1

について。

div { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
img { 
 
    max-width: 100%; 
 
} 
 
div:after { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    width: 96px; 
 
    height: 96px; 
 
    background: url('https://img.clipartfest.com/d0227ce70c0b9f371e7a7a018729143e_thumbs-up-smiley-face-big-thumbs-up-clipart_2891-2674.jpeg'); 
 
    background-size: cover; 
 
    content: ''; 
 
}

<div> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
</div>

そして、ここに同じ手法であるが、親でimgとしてオーバーレイと。

div { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
img { 
 
    max-width: 100%; 
 
} 
 
.thumb { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    width: 96px; 
 
    height: 96px; 
 
}

<div> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    <img src="https://img.clipartfest.com/d0227ce70c0b9f371e7a7a018729143e_thumbs-up-smiley-face-big-thumbs-up-clipart_2891-2674.jpeg" class="thumb"> 
 
</div>

Answer 2

絶対と相対の容器、およびお使いの再生ボタンにあなたのイメージを入れてください。

<div class="videoContainer"> 
    <img src="link_to_your_image" alt=""> 
    <img src="link_to_play_button" alt="play" class="playBtn"> 
</div> 

とCSS：

.videoContainer { 
    position: relative; 
} 
.playBtn { 
    position: absolute; 
    width: 96px; 
    height: 96px; 
    left: 50%; 
    top: 50%; 
    margin-left: -48px; /*half of the width */ 
    margin-top: -48px; /*half of the height */ 
}