Как задать перекрытие картинки другой картинкой и цветом без использования background-image?

Question

[maksimkoh]

Имеется такой слайдер:

<div id="myCarousel" class="carousel slide">
					<!-- Carousel items -->
					<div class="carousel-inner">
						<div class="item active">
							<div class="row">
								<div class="col-sm-4 "><a href="#x"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
								</div>
								<div class="col-sm-4"><a href="#x"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
								</div>
								<div class="col-sm-4"><a href="#x"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>
								</div>
							</div>
							<!--/row-->
						</div>
						<!--/item-->
						<div class="item">
							<div class="row">
								<div class="col-sm-4"><a href="#x"><img src="img/pic1.jpg" alt="Image" class="img-responsive"></a>
								</div>
								<div class="col-sm-4"><a href="#x"><img src="img/pic2.jpg" alt="Image" class="img-responsive"></a>
								</div>
								<div class="col-sm-4"><a href="#x"><img src="img/pic3.jpg" alt="Image" class="img-responsive"></a>
								</div>
								<!--/row-->
							</div>
							<!--/item-->
						</div>
						<!--/carousel-inner-->
					</div>
					<!--/myCarousel-->
				</div>

Как задать перекрытие цветом с прозрачностью + иконка зума на ней? Излазил весь интернет, но везде только варианты где картинка выводиться background-image, а у меня

Comments

[maksimkoh]

Все, нашел решение сам. Img заключить в figure и уже ему приписывать background

Answer 1

[osmolka]

Если я вас правильно поняла, то могу предложить такой вариант. Используйте эффект отсюда tympanus.net/Development/HoverEffectIdeas, подстроив его под себя, а в коде вставляете иконку fa-search-plus.

<figure class="effect-chico">
              <img src="images/galereya/1.jpg">
               <figcaption>                
                  <p><i class="fa fa-search-plus fa-3x" aria-hidden="true"></i></p>
                  <a href="images/galereya/1.jpg" data-lightbox="inter" data-title="Описание"></a>
              </figcaption>   
          </figure>