Laravel Dynamisches Bild im Bootstrap Container

Question

Ich habe eine Laravel App, die es mir erlaubt, Touren hochzuladen und es den Benutzern schließlich auch zu ermöglichen. Auf meiner Single-View-Tour-Seite (die hoffentlich hunderte sein wird) hat jede Tour ihr eigenes Titelbild unter anderem. Diese wird von mir oder dem Benutzer in unsere DB hochgeladen, die ich über src = "{{$ tour-> coverPhoto}}" anrufe.

Ich habe versucht, eine Lösung für dieses zu suchen, aber ich kann nicht scheinen, eine zu finden. Ich möchte ein weiteres div in diesem CoverFoto haben, damit ich Informationen über das CoverPhoto stellen kann. Hier

ist, was ich habe, so weit: (Ich bin mit Bootstrap)

CSS

.bg-image { 
    position: relative; 
    overflow: hidden; 
    transform: scale(1.03); 
} 
.bg-image img { 
    display: block; 
    width: 100%; 
    max-height: 100vh; 
    max-width: 1900px; 
    margin: 0 auto; 
    filter: url(blur.svg#blur); 
    -webkit-filter: blur(10px); 
    filter: blur(10px); 
} 

HTML:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="bg-image"> 
      <img src="http://placehold.it/1900x900"> 
      <div class="container"> 
       <div class="col-md-3"> 
       <p> hi</p> 
       </div> 
       <div class="col-md-9"> 
       <p>hi</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

ich JSfiddle gemacht, dass vor allem zeigt, was passiert. Jede Hilfe ist dankbar, danke! https://jsfiddle.net/c1tn14ta/

Answer 1

so etwas kann helfen, siehe die Verwendung von Position und Z-Index.

http://codepen.io/simondavies/pen/ONKLpx

HTML

<div class="image-outer-wrapper"> 
    <div class="image-wrapper"><img src="http://placehold.it/300x300"></div> 
    <div class="content-wrapper"> 
     <div class="content"> 
     content here... 
     </div> 
    </div> 
    </div> 

CSS

.image-outer-wrapper { 
    margin: 0; 
    padding:0; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    max-width: 300px; 
    max-height: 300px; 
    box-sizing: border-box; 
    } 

    .image-wrapper { 
    margin: 0; 
    padding:0; 
    z-index: 30; 
    box-sizing: border-box; 
    } 

    .content-wrapper { 
    margin: 0; 
    padding:0; 
    position: absolute; 
    bottom: 0; 
    z-index: 40; 
    width: 100%; 
    height: 50px; 
    box-sizing: border-box; 
    background: rgba(0,0,0,.3); 
    } 

    .content { 
    margin:0; 
    padding: 10px; 
    text-align: center; 
    width: 100%; 
    box-sizing: border-box; 
    }