Divのコンテンツの背後にある画像

Question

添付画像に類似した画像を作成しようとしていますが、画像が常に表示され、ホバー上にカラーオーバーレイが表示されます。

今はdivのバックグラウンドとしてイメージがありますが、divに正しいイメージを作成する方法が見つからないため、これが最善の方法であるかどうかはわかりません。リンクはmtmdevbox.com

ありがとうございます！

HTML

<div class="homepage-content img-one"> 
    <div class="hidden-content"> 
     <h1> For Guests </h1> 
     <p> Usdaerum explaudae officto commossum seque delitiae. Rate conempo rectio ius ium- quun tinullaborum dentiunt. Tem in re occatem poreperum aut faciae escia dolute pore pro volo ex etur? Offictet doluptas aruptam eos qui temossimet voloria tes- tiam reium harum sum </p> 
    </div> 
</div> 

CSS

.img-one { 
background-image: url(/wp-content/uploads/2015/07/homepage_images-03.jpg); background-repeat: no-repeat; 
width: 65%; 
background-size: 100%; 
float: right; 
clear: both;} 

screenshot of design

Answer 1

私は、これはあなたが後にしているものだと思います。助けてくれたら教えてください！

<div class="article"> 
    <div class="content"> 
    <h1> 
    This is your title 
    </h1> 
    <p> 
    This is your content 
    </p> 
    </div> 
</div> 

CSS

.article { display: block; min-height: 500px; background: url("http://placehold.it/500x500"); background-size: cover; } 
.content { display: none; margin: 0; padding: 15px; background: rgba(0, 0, 0, .5); position: relative; min-height: calc(500px - 30px); width: 30%; } 
.content h1 { margin: 0; padding: 0; } 
.article:hover .content { display: block; } 

https://jsfiddle.net/2rb18h0r/

Answer 2

よりもむしろ要素を浮き、あなたの代わりにポジショニングを使用することができます。ような何か：私は0.2に不透明度を設定した上でのデモで

.img-one { 
 
    background-image: url("http://i.imgur.com/5BK0htU.png"); 
 
    /*background-repeat: no-repeat;*/ 
 

 
    width: 100%; 
 
    height: 300px; 
 
    position: relative; 
 
    background-size: 100%; 
 
    cursor: pointer; 
 
} 
 
.img-one .hidden-content { 
 
    position: absolute; 
 
    opacity: 0.2; 
 
    transition: all 0.4s; 
 
    left: calc(35% - 10px); 
 
    width: 65%; 
 
    height: 100%; 
 
    background: rgba(200, 200, 200, 0.4); 
 
    border-left: 10px solid white; 
 
} 
 
.img-one:hover .hidden-content { 
 
    opacity: 1; 
 
} 
 
.hidden-content h1 { 
 
    margin-left: 5%; 
 
} 
 
.hidden-content p { 
 
    width: 35%; 
 
    margin-left: 5%; 
 
}

<div class="homepage-content img-one"> 
 
    <div class="hidden-content"> 
 
    <h1> For Guests </h1> 
 
    <p>Usdaerum explaudae officto commossum seque delitiae. Rate conempo rectio ius ium- quun tinullaborum dentiunt. Tem in re occatem poreperum aut faciae escia dolute pore pro volo ex etur? Offictet doluptas aruptam eos qui temossimet voloria tes- tiam 
 
     reium harum sum</p> 
 
    </div> 
 
</div>

、しかし、これを0に設定するには、完全な「隠れた」状態にできるようになります。

^{トランジション/スムーズなフェードインエフェクトが可能なので、display:hidden|noneの代わりに不透明度CSSを使用することに決めました。必要がない場合は、初期状態をdisplay:hiddenに設定し、次にホバー状態で使用することができます。display:block|inline-block}