Überblendendes Bild Überlappender Text

Question

Ich habe also einen Überblendungseffekt erstellt, der zwischen zwei Bildern übergeht. Diese Bilder befinden sich in einer Bootstrap-Spalte mit Text in einer anderen Spalte daneben. Mein Problem ist, dass, wenn der Browser kleiner als 990px ​​(Breite) ist, die Bootstrap-Spalte nicht wie erwartet reagiert, weil das Bild hinter dem Text und nicht darüber platziert ist. Ich weiß, dass es etwas mit der position: absolute zu tun hat, denn wenn ich es heraus nehme, funktioniert es richtig. Sie benötigen es jedoch, damit das Crossfade funktioniert.

Gibt es eine Möglichkeit, dieses Problem zu lösen, entweder eine bessere Möglichkeit zum Erstellen einer Überblendung zwischen Bildern oder wie man es in seinem aktuellen Zustand reparieren kann?

https://jsfiddle.net/8kec7wnw/8/

Answer 1

Der Grund hierfür ist die Verwendung von col-md-4 und col-md-8. Diese Klassen in Bootstrap beeinflussen das Layout bei Bildschirmgrößen über und unter 992 Pixel. Passen Sie diese Werte an col-sm-4 und col-sm-8 an, um den Haltepunkt 768px oder col-xs-4 und col-xs-8 festzulegen, um den Haltepunkt auf mobile Bildschirme und höher zu setzen.

Da die Bilder jedoch eine feste Breite haben, wird dieses Layout niemals wirklich reaktionsfähig sein. Ich würde empfehlen, die Bilder in einer Bootstrap-Spalte zu enthalten und deren Größe basierend auf der Spalte festzulegen.

Legen Sie die Klasse img-responsive fest, um sicherzustellen, dass sich die Größe der Bilder mit der Spalte ändert.

Answer 2

Toby ist richtig. Ich testete seine Antwort (https://jsfiddle.net/omarlin25/8kec7wnw/13/) und funktioniert.

   <div class="row"> 
       <div class="col-md-4 col-sm-8 col-xs-4 slides"> 
        <img class="img-responsive" src="http://www.iconarchive.com/download/i18083/icons-land/vista-style-emoticons/Cool.ico"> 
        <img class="img-responsive" src="https://pbs.twimg.com/profile_images/692846828132282371/foet1dNz.png"> 
       </div> 
       <div class="col-md-8 col-sm-8 col-xs-8 content-padding"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nisi condimentum, elementum nibh non, imperdiet diam. Ut lobortis mollis varius.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nisi condimentum, elementum nibh non, imperdiet diam. Ut lobortis mollis varius.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nisi condimentum, elementum nibh non, imperdiet diam. Ut lobortis mollis varius.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nisi condimentum, elementum nibh non, imperdiet diam. Ut lobortis mollis varius.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
       </div> 
      </div> 

PD. Ich habe versucht, dies in einem Kommentar zu schreiben, aber ich habe noch nicht genug Punkte