Наложение изображения наложения - требуется прозрачная прозрачность

Question

Я пытаюсь добавить красочную прозрачную накладку, когда вы наведите курсор на изображение (любой цвет: фиолетовый, синий, красный, оранжевый будет здорово), но вместо этого я получаю белый прозрачный наложение. Обратите внимание, что я использую загрузочную сетку, чтобы мои изображения оставались отзывчивыми. Я пробовал все, о чем я могу думать ... добавив фона-цвета: синий с некоторой непрозрачностью, но я застрял. Белый оверлей выглядит хорошо, но я хотел немного повеселиться с цветом. Посмотрите мой код ниже и расскажите мне, что мне нужно сделать. Большое спасибо!

<div class="container"> 
     <div class="row"> 
      <div class="hover12 col-lg-3 col-sm-4 col-xs-6"> 
       <a href="#" class="thumbnail"> 
        <img src="images/flowers4.jpg" class="img-responsive"> 
       </a> 
      </div> 
      <div class="hover12 col-lg-3 col-sm-4 col-xs-6"> 
       <a href="#" class="thumbnail"> 
        <img src="images/flowers5.jpg" class="img-responsive"> 
       </a> 
      </div> 
    </div> <!-- closes div row --> 
</div> <!-- closes div container --> 

код CSS:

.hover12 img { 
    background-color: blue; 
    opacity: 1; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 

.hover12 img:hover{ 
    opacity: .5; 
} 

Answer 1

opacity исчезает весь элемент, включая его фона, он не делает содержание прозрачным и фон проступают. Вместо этого вы должны поместить элемент с вашим цветом (возможно, синий) под изображение и сделать изображение непрозрачным (с opacity) или скрыть и показать элемент поверх изображения с некоторой прозрачностью.

Вот пример. При наведении изображение становится непрозрачным на 50%, и вы видите синий элемент под ним.

.img-container { 
 
    background-color: blue; 
 
    display: inline-block; 
 
    line-height: 0; 
 
} 
 

 
.img-container img:hover { 
 
    opacity: .5; 
 
}

<div class="img-container"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQU-rOCZDSdyIGgSvZhU-lqIhG32Yd8KrwI3gWKXSCayFXQuJTx0g" /></div>

---

Edit:

Я просто смотрел на Ваш код и понял, что вы в основном имеют это право, кроме вас цвет фона, установленный на img элемент, но он должен быть установлен на элементе, который содержит img, который является классом .thumbnail, поэтому попробуйте просто добавить:

.thumbnail { 
    background-color: blue; 
} 

Answer 2

Это, вероятно, лучше всего выполняется с использованием псевдоэлемента, который накладывает изображение. Вот как создать pseudoelement, который перекрывает изображение и пониженную прозрачность, когда изображение переворачивается:

#theimg { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
#theimg::after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    opacity: 1; 
 
} 
 

 

 
#theimg:hover::after { 
 
    opacity: .5; 
 
}

<div id="theimg"> 
 
    <img src="https://i.imgur.com/LDR6AWn.png?1" /> 
 
</div>

Answer 3

Самый простой способ заключается в использовании :before сделать полупрозрачные наложения:

img:hover:before { 
    content: ''; 
    position:absolute; 
    top:0;left:0;bottom:0;right:0; 
    background:rgba(0,0,255,0.3); 
} 

Даунсайд является то, что он будет блокировать изображение быть интерактивными, и может быть проблемой при использовании изображений с помощью CSS background вместо <img /> в H TML.

---

Другой способ, если поддержка Internet Explorer не является проблемой (что может быть в случае, если этот эффект только для показа), вы можете играть с помощью CSS filter. Это не так просто, как накладывании прозрачного изображения над изображением, но вы можете получить некоторые очень интересные эффекты:

img.grayscale:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); } 
img.contrast:hover { -webkit-filter: contrast(150%); filter: contrast(150%); } 
img.brightness:hover { -webkit-filter: brightness(1.5); filter: brightness(1.5); } 
img.hue-rotate:hover { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); } 
img.saturate:hover { -webkit-filter: saturate(2); filter: saturate(2); } 
img.blur:hover { -webkit-filter: blur(2px); filter: blur(2px); } 
img.invert:hover { -webkit-filter: invert(1); filter: invert(1); } 
img.sepia:hover { -webkit-filter: sepia(75%); filter: sepia(75%); } 

Для вашего вопроса, я бы рекомендовал использовать .hue-rotate и, возможно, добавить CSS transition. Примечание: вы можете комбинировать эффекты!

Поиграйте с ползунками: http://www.cssreflex.com/css-generators/filter/ или http://html5-demos.appspot.com/static/css/filters/index.html