Bild hinter Inhalt in Div

Question

Ich versuche, etwas ähnliches zu dem angehängten Bild zu erstellen, wo die Bilder die ganze Zeit angezeigt werden, und dann bei Hover wird der Inhalt mit der Farbüberlagerung angezeigt.

Im Moment habe ich die Bilder als Hintergrund für das div, aber ich bin mir nicht sicher, ob das der beste Weg ist, dies zu tun, weil ich keinen Weg finde, das Bild die richtige Höhe im div zu machen. Der Link ist mtmdevbox.com

Vielen Dank im Voraus!

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

Ich denke, das ist das, was Sie nach. Lass es mich wissen, wenn es hilft!

<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

Anstatt die Elemente schwimmen, können Sie Positionierung stattdessen verwenden. Etwas wie:

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

In der obigen Demo ich die Deckkraft auf 0,2 festgelegt habe, was jedoch auf 0 setzt einem kompletten ‚versteckten‘ Zustand ermöglichen.

^{Ich habe mich entschieden, die Opazität CSS anstelle von display:hidden|none zu verwenden, da dies Übergänge/weiche Einblendeffekte ermöglicht. Wenn Sie das nicht möchten, können Sie den Anfangszustand display:hidden festlegen und dann im Hover-Status display:block|inline-block}

verwenden