Bootstrap Gallery Hover

Question

Ich habe einen Hover-Effekt für meine Galerie erstellt. Die Galerie befindet sich in einem Bootstrap-Grid. Der Hover selbst funktioniert gut, aber in einigen Bildschirmgrößen geht das Overlay über die Galeriebilder.

Hat jemand eine Idee oder eine Lösung oder einen Hinweis für dieses Problem?

Hier ein Beispiel:

demo

---

HTML:

<div class="container"> 
     <div class="row"> 

      <div class="col-md-4 col-sm-4"> 
       <a href="http://www.google.com"> 
        <div class="box"> 
         <img class="img-responsive" src="http://placehold.it/300x300" /> 
         <div class="overbox"> 
          <div class="title overtext">Client</div> 
          <div class="tagline overtext">Tag</div> 
         </div> 
        </div> 
       </a> 
      </div> 

      <div class="col-md-4 col-sm-4"> 
       <a href="http://www.google.com"> 
        <div class="box"> 
         <img class="img-responsive" src="http://placehold.it/300x300" /> 
         <div class="overbox"> 
          <div class="title overtext">Client</div> 
          <div class="tagline overtext">Tag</div> 
         </div> 
        </div> 
       </a> 
      </div> 

      <div class="col-md-4 col-sm-4"> 
       <a href="http://www.google.com"> 
        <div class="box"> 
         <img class="img-responsive" src="http://placehold.it/300x300" /> 
         <div class="overbox"> 
          <div class="title overtext">Client</div> 
          <div class="tagline overtext">Tag</div> 
         </div> 
        </div> 
       </a> 
      </div> 

     </div> 
    </div> 

CSS:

.box { 
    position: relative; 
    cursor: pointer; 
    width: 100%; 
    min-height: 100%; 
    overflow: hidden; 
    margin-bottom: 30px; 
} 

.box .overbox { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 100; 
    background-color: rgba(204, 36, 42, 0.75); 
    color: #fff; 
    opacity: 0; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 

.box:hover .overbox { 
    opacity: 1; 
} 

.box .title { 
    font-size: 22px; 
    line-height: 131%; 
    font-weight: 400; 
    text-align: center; 
    padding-top: 95px; 
} 

@media (max-width: 991px) { 
    .box .title { 
     padding-top: 43px; 
    } 
} 

.box .tagline { 
    position: absolute; 
    bottom: 0px; 
    padding-top: 16px; 
    padding-bottom: 16px; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    font-size: 16px; 
    font-weight: 400; 
    font-style: italic; 
    border-top: 1px solid rgb(255, 255, 255); 
} 

.box_client { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: grayscale(100%); 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 

.box_client:hover { 
    background: rgb(235, 234, 233); 
    -webkit-filter: grayscale(0%); 
    -moz-filter: grayscale(0%); 
    -ms-filter: grayscale(0%); 
    -o-filter: grayscale(0%); 
    filter: grayscale(0%); 
} 

.img-responsive { 
    margin: 0 auto; 
} 

Answer 1

das Overlay geht über die Galerie-Bilder, weil Sie überlagern hat width:100%; und wenn das Bild kleiner als die Breite des Containers ist geht das Overlay über die wegen der Breite der Bildgaleriebild

Sie haben 2 Möglichkeiten können Sie machen das Bild width:100% oder Sie können den Stil der .box Klasse ändern und entfernen width:100%; und machen seine display:inline-block;

.box { 
    position: relative; 
    cursor: pointer; 
    // width: 100%;   // remove this 
    display:inline-block; // add this 
    min-height: 100%; 
    overflow: hidden; 
    margin-bottom: 30px; 
} 

Answer 2

die Bootstrap-Säule wächst und schrumpft, während das Bild die gleiche feste Größe hat. So .responsive-image ist kleiner als seine Eltern div. Es gibt ein paar Lösungen:

1) Entfernen Sie das Bild in der HTML und haben es als Hintergrund-Bild

.box { 
    background: url(image-url) cover no-repeat; 
} 

2) Machen Sie das Bild 100% Breite

.response-image { 
    width: 100%; 
} 

3) Oder wie Ahmed Salama vorschlägt, entfernen Sie die width: 100% und fügen Sie display: inline-block;

Answer 3

hinzu. Ihr Platzhalter ist kleiner als das Eltern-Element, das in das ganze witdh von ihm passt Miete. Das liegt an der Klasse img-responsive, die selbst das Bild auf "max-width: 100%" anpasst. Sie sollten ein größeres Bild verwenden oder es an die Größe Ihrer Elternbox anpassen, was nicht empfohlen wird.

In diesem Stift, änderte ich die placeholdersizes zu 767px x 767px: http://codepen.io/pure180/details/OXpNxM/ HTML:

  <div class="col-md-4 col-sm-4"> 
       <a href="http://www.google.com"> 
        <div class="box"> 
         <img class="img-responsive" src="http://placehold.it/767x767" /> 
         <div class="overbox"> 
          <div class="title overtext">Client</div> 
          <div class="tagline overtext">Tag</div> 
         </div> 
        </div> 
       </a> 
      </div> 

      <div class="col-md-4 col-sm-4"> 
       <a href="http://www.google.com"> 
        <div class="box"> 
         <img class="img-responsive" src="http://placehold.it/767x767" /> 
         <div class="overbox"> 
          <div class="title overtext">Client</div> 
          <div class="tagline overtext">Tag</div> 
         </div> 
        </div> 
       </a> 
      </div> 

      <div class="col-md-4 col-sm-4"> 
       <a href="http://www.google.com"> 
        <div class="box"> 
         <img class="img-responsive" src="http://placehold.it/767x767" /> 
         <div class="overbox"> 
          <div class="title overtext">Client</div> 
          <div class="tagline overtext">Tag</div> 
         </div> 
        </div> 
       </a> 
      </div> 

     </div> 
    </div> 

Answer 4

Hier ist mein Ansatz: https://jsfiddle.net/5f285ask/3/

.box { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.box .overbox { 
 
    background-color: rgba(204, 36, 42, 0.75); 
 
    height: 100%; 
 
    left: 0; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    -webkit-transition: all 300ms ease-out; 
 
    -moz-transition: all 300ms ease-out; 
 
    -o-transition: all 300ms ease-out; 
 
    -ms-transition: all 300ms ease-out; 
 
    transition: all 300ms ease-out; 
 
    width: 100%; 
 
} 
 

 
.box:hover .overbox { 
 
    opacity: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-4 col-sm-4"> 
 
    <div class="box"> 
 
    <a href="#"> 
 
     <img alt="" src="http://placehold.it/300x300" class="img-responsive"> 
 
     <div class="overbox"> 
 
     overbox content 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>

Answer 5

Ich reparierte mit diesem

.box { 
position: relative; 
cursor: pointer; 
max-width: 300px; 
min-height: 100%; 
overflow: hidden; 
margin: 0 auto; 
margin-bottom: 30px;}