Как поставить иконку по центру img?

Question

При наведении на на картинку должен появляться глаз как на макете, что только не пробовал, но никак не могу понять как это сделать, будь это просто бэкграунд было бы проще в разы, а тут img тэг и тэг i. p.s использую font-awesome

.work-cards-img {
  min-width: 337px;
  height: 100%;
}

.fa-eye {
  color: rgb(0, 0, 0);
  font-size: 50px;
  align-self: center;
  position: relative;
}

.work-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

<div class="work-cards-container">
  <div class="work-cards">
    <i class="fal fa-eye "></i><img src="https://unsplash.com/photos/pb_lF8VWaPU/download?force=true&w=640" alt="" class="work-cards-img">
    <i class="fal fa-eye"></i><img src="https://unsplash.com/photos/2-1wvS-jZZQ/download?force=true&w=640" alt="" class="work-cards-img">
    <i class="fal fa-eye"></i><img src="https://unsplash.com/photos/89xuP-XmyrA/download?force=true&w=640" alt="" class="work-cards-img">
    <i class="fal fa-eye"></i><img src="https://unsplash.com/photos/CB4z0uTFSYg/download?force=true&w=640" alt="" class="work-cards-img">
    <i class="fal fa-eye"></i><img src="https://unsplash.com/photos/w33-zg-dNL4/download?force=true&w=640" alt="" class="work-cards-img">
    <i class="fal fa-eye"></i><img src="https://unsplash.com/photos/01voTCIdeWw/download?force=true&w=640" alt="" class="work-cards-img">
    <i class="fal fa-eye"></i><img src="https://unsplash.com/photos/kylL5DcscOA/download?force=true&w=640" alt="" class="work-cards-img">
    <i class="fal fa-eye"></i><img src="https://unsplash.com/photos/rnwO_5kZwx8/download?force=true&w=640" alt="" class="work-cards-img">
  </div>
</div>

Answer 1

Я бы не рекомендовал устанавливать position: relative элементом,у которых display: inline. Плюс у самих font-awesome элементы i::before тоже position: relative.

.work-card {
  width: 200px;
  height: 150px;
  display: inline-block;
}

.work-card img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

.fa-eye {
  display: block;
  color: #fff;
  text-shadow: 2px 2px 1px #000;
  font-size: 50px;
  position: relative;
  z-index: 2;
  transform: translate(-50%, -50%);
  left: 100px;
  top: 70px;
}

.fa-eye::before {
  display: none;
}
.work-card:hover img{
  margin-top:-50px;
}
.work-card:hover .fa-eye{
line-height:50px;
}
.work-card:hover .fa-eye::before {
  display: block;
}

.work-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<div class="work-cards-container">
  <div class="work-cards">
    <div class="work-card"><i class="fal fa-eye"></i><img src="https://unsplash.com/photos/pb_lF8VWaPU/download?force=true&w=640" alt="" class="work-cards-img">
    </div>
    <div class="work-card"><i class="fal fa-eye"></i><img src="https://unsplash.com/photos/2-1wvS-jZZQ/download?force=true&w=640" alt="" class="work-cards-img">
    </div>
    <div class="work-card"><i class="fal fa-eye"></i><img src="https://unsplash.com/photos/89xuP-XmyrA/download?force=true&w=640" alt="" class="work-cards-img">
    </div>
    <div class="work-card"><i class="fal fa-eye"></i><img src="https://unsplash.com/photos/CB4z0uTFSYg/download?force=true&w=640" alt="" class="work-cards-img">
    </div>
    <div class="work-card"><i class="fal fa-eye"></i><img src="https://unsplash.com/photos/w33-zg-dNL4/download?force=true&w=640" alt="" class="work-cards-img">
    </div>
    <div class="work-card"><i class="fal fa-eye"></i><img src="https://unsplash.com/photos/01voTCIdeWw/download?force=true&w=640" alt="" class="work-cards-img">
    </div>
    <div class="work-card"><i class="fal fa-eye"></i><img src="https://unsplash.com/photos/kylL5DcscOA/download?force=true&w=640" alt="" class="work-cards-img">
    </div>
    <div class="work-card"><i class="fal fa-eye"></i><img src="https://unsplash.com/photos/rnwO_5kZwx8/download?force=true&w=640" alt="" class="work-cards-img"></div>
  </div>
</div>

БЛОГ НА HUSL

Как поставить иконку по центру img?

Ответы (1 шт):