画像の上にテキストがある透明なボックス

Question

画像の上にテキストを含む中央の透明なボックスを作成するのに助けが必要です。私は検索し、検索して検索しましたが、正解は見つかりませんでした。

<div class="grid12-6"> 

<img src="image-url"> 
<h2>Fashion Bracelets</h2> 
<button>See More</button> 

</div> 

と、私はこのようなものが必要です：

私は任意の助けのために非常に感謝するでしょうが、私はこのコードを持っている、のは、言ってみましょう。

Answer 1

ほとんど同じようなことが作成されましたが、外観上の変更はほとんど必要ありません。

HTML

<div class="grid12-6"> 

<img src="http://i.stack.imgur.com/XRN4Y.jpg"> 
<div class="inner_box"> 
    <h2>Fashion Bracelets</h2> 
    <button>See More</button> 
</div> 

</div> 

上記のコードでCSS

.grid12-6{ 
    position:relative; 
} 
.grid12-6 .inner_box{ 
    position:absolute; 
    background:rgba(255,255,255,0.7); 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    padding:35px; 
    text-align:center; 
} 
.grid12-6 .inner_box h2{ 
    font-family:arial; 
    text-align:center; 
    font-size:26px; 
    font-weight:normal; 
    color:#777; 
} 
.grid12-6 .inner_box button{ 
    background:#aaa; 
    color:#fff; 
    text-transform:uppercase; 
    font-weight:bold; 
    font-size:16px; 
    border:none; 
    padding:10px 30px; 
} 

あなたは色の変更が必要になることがあり、画像がそれに応じて変更にそれを使用して、結果マイナーフォントサイズを参照してくださいダミー