Как разместить картинку поверх блока div?

Question

Нужно сделать такую иконку.

Реализовать пробую через clip-path Разметка

  <div class="about about-gray">
 <div class="column column-gray">
 <div class="img__circle">
  <img src="images/contacts/01.svg" alt="">
</div>

Стили

 .about {
display: flex;
flax-direction : row;
justify-content: space-between;

}
.column{
display: flex;
flex-direction: column;
background-color: #ffffff;
flex : 0 1 33.333%;
justify-content: сenter;
max-height: 100vh;
min-width: 33.333%;
}

.img__circle {
 background-color:  rgba(35, 45,80, 1);
 clip-path: circle(100px at center);
 display: flex;
 justify-content: center;
 }
 .img__circle img {
  width: 30%;
  height: 30%;
  display: block;
  z-index: 10;
  }

Вот что получилось

Как "поднять иконку над дивом"? z-index не помог. Если прописать иконке

 position : absolute;
 teft: 50%;
 top : 50%;

а div .img__circle — position : reletive; то блок с иконкой отображается точно так же.

Answer 1

.icon {
  width: 50px; height: 50px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon>svg {
  display: block;
  width: 24px; height: 24px;
}

<div class="icon">
  <svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" tabindex="-1" title="Adjust" data-ga-event-category="material-icons" data-ga-event-action="click" data-ga-event-label="Adjust">
    <path d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3-8c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3z">
    </path>
  </svg>
</div>

Answer 2

.img__circle {
  background-color: rgba(35, 45, 80, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.img__circle img {
  width: 50px;
  height: 50px;
  display: block;
  z-index: 10;
  object-fit: cover;
}

<div class="about about-gray">
  <div class="column column-gray">
    <div class="img__circle">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/SVG_Logo.svg/512px-SVG_Logo.svg.png" alt="">
    </div>

БЛОГ НА HUSL

Как разместить картинку поверх блока div?

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