Как сделать hover effect с иконкой поверх картинки?

262

13 мая 2018, 13:40

Мне необходимо с помощью css и его :hover наложить градиент и icon поверх картинки. Выглядеть это должно примерно вот так, у меня же получается это только вот так:

.test { 
  display: block; 
  height: 200px; 
  background: url(http://krolik74.kpeatop.com/hosting.png) no-repeat; 
  width: 588px; 
} 
 
.test:hover { 
  background: linear-gradient(270deg, rgba(0, 188, 240, 0.7) 0%, rgba(5, 42, 64, 0.7) 100%), url(http://krolik74.kpeatop.com/hosting.png) no-repeat; 
}

<div class="test"> 
 
</div>

Подскажите как сделать пожалуйста. И еще возможно есть картинки вставлять через html, а не через css?

Answer 1

Вот так:

.test { 
  display: block; 
  height: 200px; 
  background: url(http://krolik74.kpeatop.com/hosting.png) no-repeat; 
  width: 400px; 
  position: relative; 
} 
 
.testHover { 
  opacity: 0; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: #fff; 
  font-size: 32px; 
  transition: opacity 1s ease-in-out; 
  background: linear-gradient(270deg, rgba(0, 188, 240, 0.7) 0%, rgba(5, 42, 64, 0.7) 100%), url(http://krolik74.kpeatop.com/hosting.png) no-repeat; 
} 
.test:hover .testHover { 
  opacity: 1; 
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/> 
<div class="test"> 
    <div class='testHover'> 
      <i class="fas fa-link"></i> 
    </div> 
</div>

P.S для иконки я использовал font-awesome вот линк на него:

Ccылка

Answer 2

Благодаря Zicrael (спасибо тебе) доработал так, как хотел. Чтобы картинки находились в html, а не css.

 <div class="container">
                <img src="http://ipic.su/img/img7/fs/hosting.1526023725.png" alt="Avatar" class="image" style="width:100%">
                <div class="middle">
                    <div class="text">
                        <div class="union"></div>
                    </div>
                </div>
            </div>

.container {
    position: relative;
    width: 600px;
}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.container:hover .image {
  /*opacity: 0.5; */
}
.container:hover .middle {
  opacity: 1;
}
.text {
  font-size: 16px;
  width: 600px;
  height: 208px;
  background: linear-gradient(270deg, rgba(0, 188, 240, 0.7) 0%, rgba(5, 42, 64, 0.7) 100%) no-repeat;
}
.union {
    background: url(http://ipic.su/img/img7/fs/Union.1526023689.png) center no-repeat;
    width: 100%;
    height: 100%;
}