データベースから画像の上にCSSオーバーレイを作成する方法

Question

透明なオーバーレイを持つサムネイルを使用したいので、ユーザーが画像の上を移動すると、中央に「x」グリフコンとテキストが表示されますその下に「写真を削除する」と表示されます。それは純粋なcss3である必要があり、ユーザが自分のページから画像を削除することです。これはdbを介して行われます。しかし、htmlに画像をハードコードするのではなく、オーバーレイを持つようにデータベースから呼び出される画像に対して、どのように機能することを保証するにはどうすればよいですか？

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <img src="img1" data-src="" class="img-responsive"> 
     <img src="img2" data-src="" class="img-responsive"> 
     </div> 
    </div> 
</div> 

ありがとうございます。

Answer 1

これは純粋なCSS

.img-wrap:hover > .img-options{ 
 
    display: block; 
 
} 
 

 
.img-options{ 
 
    display: none; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="img-wrap"> 
 
      <img src="img1" data-src="" class="img-responsive"> 
 
      <div class="img-options"> 
 
      delete image 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

で何をしたいあなたは、各画像のオプションを表示/非表示にすることができます。この道をacomplishする一つの選択肢です。 img-options要素をイメージの上に絶対配置するには、cssコードを必ず入力してください。

Answer 2

コンテナ要素でCSS 2.1セレクタ:hoverを使用し、Xアイコンをそのコンテナの透明な背景イメージとして設定できます。

.col-md-12:hover { 
    background-image: url(x-icon.png); 
    background-repeat: no-repeat; 
    background-position: center center 
} 

.col-md-12ではなく、汎用クラス名を使用する必要があります。

Answer 3

が、私はこの

span { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
span:hover:after { 
 
    content: 'X \A' attr(data-text); 
 
    white-space: pre; 
 
    font-size: 24px; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(255,255,255,0.5); 
 
}

<span data-text="Delete image"> 
 
    <img src="http://lorempixel.com/200/100/animals/3" data-src="" class="img-responsive"> 
 
</span>