webentwicklung-frage-antwort-db.com.de

Image-Overlay beim Bootstrap von Images in responsive Größe

Ich versuche, ein reaktionsfähiges Raster von Bildern (mit Beschreibungen) zu erstellen, das beim Überfahren mit der Maus eine Farbüberlagerung (nur das Bild und nicht den Text) hat. Aufgrund der ansprechenden Höhen der Bilder habe ich ein Problem, bei dem die Überlagerung alles abdeckt und nicht nur das Bild.

Wie kann ich das beheben?

Ich habe das Problem hier zum besseren Verständnis neu erstellt: http://jsfiddle.net/r8rFc/

Hier ist mein HTML:

<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-3 project">
        <a href="#">
            <div>
                <img src="http://placehold.it/500x500" class="img-responsive"/>
                <div class="fa fa-plus project-overlay"></div>
            </div>
            <div style="text-align:center;">
                <h3>Project name</h3>
                <p>Image description</p>
            </div>
        </a>
    </div>

</div>

Und mein CSS:

.project-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;
    padding: 50%;
}

Danke im Voraus!

17
RGilkes

Fügen Sie dem übergeordneten div eine Klasse hinzu, und legen Sie die folgende CSS-Adresse fest:

.img-overlay {
    position: relative;
    max-width: 500px; //whatever your max-width should be 
}

position: relative ist für ein übergeordnetes Element von untergeordneten Objekten mit position: absolute erforderlich, damit die untergeordneten Elemente in Bezug auf dieses übergeordnete Element positioniert werden.

DEMO

32
brouxhaha

Wenn Sie position: absolute angeben, positioniert es sich auf dem nächsthöheren Element mit position: relative. In diesem Fall ist das das .project div. 

Wenn Sie dem unmittelbaren übergeordneten div des Bildes einen Positionsstil zuweisen: relativ, wird die Überlagerung zu dem anstelle des div, das den Text enthält, verwendet. Zum Beispiel: http://jsfiddle.net/7gYUU/1/

 <div class="parent">
    <img src="http://placehold.it/500x500" class="img-responsive"/>
    <div class="fa fa-plus project-overlay"></div>
 </div>

.parent {
   position: relative;
}
3
Michelle

Wenn ich Ihre Frage verstehe, möchten Sie die Überlagerung direkt über dem Bild haben und nicht alles abdecken?

Ich würde die übergeordnete DIV-Position (in Inhalt in jsfiddle umbenannt) auf relativ setzen, da die Überlagerung relativ zu diesem div und nicht zum Fenster positioniert werden sollte.

.content
{
  position: relative;
}

Ich habe ein wenig herumgepfiffen und die Geige aktualisiert, um die Überlappung an das img angepasst zu haben, was (ich denke) ist, was Sie wollen, lassen Sie es mich trotzdem wissen :) http://jsfiddle.net/b9Vyw/

2
ottis

Ich hatte ein bisschen Mühe, dies auch zum Laufen zu bringen. Die Antwort von brouxhaha brachte mich zu 90% zu dem, was ich suchte. Aber die Anpassung der Polsterung erlaubte mir nicht, den Text irgendwo zu platzieren, wo ich wollte. Die Verwendung von oben und links schien für meine Zwecke besser zu funktionieren.

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 80%;
    left: 20%;
}

http://jsfiddle.net/1rz0b7d8/1/

0
radix07
<div class="col-md-4 py-3 pic-card">
          <div class="card ">
          <div class="pic-overlay"></div>
          <img class="img-fluid " src="images/Site Images/Health & Fitness-01.png" alt="">
          <div class="centeredcard">
            <h3>
              <span class="card-headings">HEALTH & FITNESS</span>
            </h3>
            <div class="content-inner mt-5">
              <p class="lead  p-overlay">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsam nemo quasi quo quae voluptate.</p>
            </div>
          </div>
          </div>
        </div>


.pic-card{
     position: relative;

 }
 .pic-overlay{

    top: 0;
    left: 0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: background-color 0.5s ease;

 }
 .content-inner{
    position: relative;
     display: none;
 }

 .pic-card:hover{
     .pic-overlay{
        background-color: $dark-overlay;

     }

     .content-inner{
         display: block;
         cursor: pointer;
     }

     .card-headings{
        font-size: 15px;
        padding: 0;
     }

     .card-headings::after{
        content: '';
        width: 80%;
        border-bottom: solid 2px  rgb(52, 178, 179);
        position: absolute;
        left: 5%;
        top: 25%;
        z-index: 1;
     }
     .p-overlay{
         font-size: 15px;
     }
 }



enter code here
0
vogonyo