[Помогите] Как убрать белый отступ от изображения

YehorVasch · 28 дек 2016

Здравствуйте, имеются адаптивные изображения и после добавления к ним эффекта при наведение (появление текста и градиентное затемнение), появился белый отступ от изображения. Не могу разобраться от чего от появился и как его убрать. Прикрепляю HTML и CSS. Возможно глупый вопрос или же неправильно оформленный пост, прошу прощение, обучаюсь. Заранее спасибо.

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Exo+2:300,300italic,500,600&amp;subset=latin,cyrillic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">

</head>
<body>
  <section id="responsive-images-breakpoints">
    <div class="container">
    <div class="thumbs">
    <a href="#4"><img class="breakpoint" src="http://dbmast.ru/files/responsive-images-demo/images/image02.jpg" width="960" height="640" /></a>
    <div class="caption">
        <span class="title">Заголовок картинки</span>
        <span class="info">Краткое описание или анонс записи </span>
    </div>
</div>
    <div class="thumbs">
    <a href="#3"><img class="breakpoint" src="http://dbmast.ru/files/responsive-images-demo/images/image01.jpg" width="960" height="640" /></a>
    <div class="caption">
        <span class="title">Заголовок картинки</span>
        <span class="info">Краткое описание или анонс записи</span>
    </div>
</div>
    <div class="thumbs">
    <a href="#2"><img class="breakpoint" src="http://dbmast.ru/files/responsive-images-demo/images/image03.jpg" width="960" height="640" /></a>
    <div class="caption">
        <span class="title">Заголовок картинки</span>
        <span class="info">Краткое описание или анонс записи</span>
    </div>
</div>
    <div class="thumbs">
    <a href="#1"><img class="breakpoint" src="http://dbmast.ru/files/responsive-images-demo/images/image04.jpg" width="960" height="640" /></a>
    <div class="caption">
        <span class="title">Заголовок картинки</span>
        <span class="info">Краткое описание или анонс записи</span>
    </div>
</div>
    </div>
  </section>
</body>
</html>

Код:

@charset "UTF-8";

* { margin: 0; padding: 0; }

img {
  width: 100%;
  height: auto;
}


.breakpoint {
  max-width: 100%;
  display: inline-block;
}
@media (min-width: 420px) {
  .breakpoint {
    max-width: 48%;
  }
}
@media (min-width: 760px) {
  .breakpoint {
    max-width: 48%;
  }
}

.container {
  position: relative;
  width: 96%;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

section {
  margin: 60px auto;
}

.thumbs {
  width: 100%;
  max-width: 100%; /* опционально */
  margin: 5px;
  opacity: .99;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  cursor: pointer;
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.thumbs:before {
  content: '';
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  width: 100%;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.thumbs img {
  display: block;
  width: 100%; /* ширина картинки */
  height: 100%; /* высота картинки */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.thumbs .caption {
  width: 100%;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  text-align: center;
}
.thumbs .caption span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.thumbs .caption .title {
  line-height: 1;
  font-weight: normal;
  font-size: 18px;
}
.thumbs .caption .info {
  line-height: 1.2;
  margin-top: 5px;
  font-size: 12px;
}
.thumbs:focus:before,
.thumbs:focus span, .thumbs:hover:before,
.thumbs:hover span {
  opacity: 1;
}
.thumbs:focus:before, .thumbs:hover:before {
  top: 50%;
}
.thumbs:focus span, .thumbs:hover span {
  top: 0;
}
.thumbs:focus .title, .thumbs:hover .title {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.thumbs:focus .info, .thumbs:hover .info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

--- Добавлено, 28 дек 2016 ---

Уже не смог отредактировать, вот ссылка на песочницу: https://jsfiddle.net/YehorVasch/Leczp9qn/

iga · 28 дек 2016

Белый отступ это что? То, что справа торчит?
breakpoint'ы уберите
Код:
@media (min-width: 420px) {
  .breakpoint {
    max-width: 100%;
  }
}
@media (min-width: 760px) {
  .breakpoint {
    max-width: 100%;
  }
}

YehorVasch · 28 дек 2016

iga сказал(а): ↑

Белый отступ это что? То, что справа торчит?
breakpoint'ы уберите
Нажмите, чтобы раскрыть...

Дело в том что, необходимо что бы отображалось две картинке в строчку, а при переходе на экраны меньшего разрешения трансформация в список. Так оно и было до добавления эффектов.
Вот пример на тот как было до добавления эффекта и соотвецтвено как должно остаться уже с эффектом:
https://jsfiddle.net/YehorVasch/8x4fjggw/

Спасибо!

П.С. Да белый отступ это продление картинки белым с права.

Perat · 28 дек 2016

Доброго https://jsfiddle.net/Perat/Leczp9qn/1/

YehorVasch · 28 дек 2016

Perat сказал(а): ↑

Доброго https://jsfiddle.net/Perat/Leczp9qn/1/
Нажмите, чтобы раскрыть...

Огромное спасибо!! Сейчас будем разбираться что делал не так ))