Bootstrap Gallery Hover

Question

Я создал эффект зависания для моей галереи. Галерея находится в сетке Bootstrap. Наведение само по себе прекрасно работает, но в некоторых размерах экрана наложение просматривается на изображениях галереи.

Есть ли у кого-нибудь идея или решение или намек на эту проблему?

Вот пример:

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

оверлей переходит в галерею изображений, потому что вы наложение width:100%;, а если изображение меньше ширины контейнера покрышка проходит через галерею изображения из-за ширины изображения

у вас есть 2 варианта вы можете сделать изображение width:100% или вы можете изменить стиль класса .box и удалить width:100%; и сделать его 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

бутстрапом колонна растет и сжимается, когда изображение имеет тот же фиксированный размер. Таким образом, .responsive-image меньше его родителя div. Есть несколько решений:

1) Удалить изображение в HTML и иметь его в качестве фонового изображения

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

2) сделать изображение шириной 100%

.response-image { 
    width: 100%; 
} 

3) Или, как предлагает Ахмед Салама, удалите width: 100% и добавьте display: inline-block;

Answer 3

Ваш placeholder меньше, чем элемент родительского div, который вписывается во всю witdh его па аренда. То, что вызвано классом img-отзывчивым, само по себе соответствует изображению «max-width: 100%». Вы должны использовать большее изображение или вносить его в размер в родительский блок, что не рекомендуется.

В этом загоне, я изменил placeholdersizes на 767px х 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

Вот мой подход: 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

Я установил с этим

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