Фоновый ролловер на адаптивном изображении с использованием CSS

Question

Я пытаюсь создать эффект наложения на адаптивное изображение с помощью CSS3 и bootstrap3. Проблема заключается в том, что при наведении мыши появляется наложенный фон, который применяется к полям, так что он больше, чем само изображение.

Вот мой HTML:

<div class="col-sm-6 col-md-4 col-lg-3">
  <figure>
    <a href="#">
      <img class="img-responsive" src="img/portfolio/prw-4.jpg">
    </a>
  </figure>
</div>

И CSS:

#portfolio figure a:after {
    content:'Text';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
    background: rgba(0,0,0,0.7);
    color: #FFF;
    text-align: center;
    padding: 60px 0;
}
#portfolio figure a:hover:after {
    opacity:1;
}

У кого-нибудь есть предложение? Спасибо

Answer 1

Вы можете изучить использование размеров блоков, так как вы уже используете "экспериментальный" css3. Здесь есть хорошая статья: Размеры блоков |CSS-хитрости

Итак, в основном:

* {
   -moz-box-sizing:    border-box;   /* Firefox 1, probably can drop this */
   -webkit-box-sizing: border-box;   /* Safari 3-4, also probably droppable */
    box-sizing:        border-box;   /* Everything else */
}

В вашем CSS и, возможно, это решит это для вас. Удачи.