Как спозиционировать иконки соц. сетей поверх изображения?

Question

Как сделать так, чтобы эти иконки были поверх картинки?

вот так:

Вот код:

<figure>
  <img class="md_khalil_uddin" src="img/Md. Khalil Uddin.png" alt="Md. Khalil Uddin" >
  <div class="team__social">
    <img src="img/facebook_logo.png" alt="">
    <img src="img/twitter_logo.png" alt="">
    <img src="img/google_plus_logo.png" alt="">
    <img src="img/linkedin_logo.png" alt="">
  </div>  
  <figcaption class="figc1">Md. Khalil Uddin</figcaption>
  <figcaption class="figc2">Head of Ideas</figcaption>
</figure>

Answer 1

Используя эти CSS-переменные можно управлять позицией .team__social

--left: 50%;
--top: 60%;

figure {
  position: relative;
  border: 1px solid red;
}

.flex-container {
  display: flex;
}

img {
  display: block;
  max-width: 100%;
}

.team__social {
  display: flex;
  position: absolute;
  --left: 50%;
  --top: 60%;
  left: var(--left);
  top: var(--top);
  transform: translate(calc( -1 * var(--left)), calc( -1 * var(--top)));
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}

.team__social > *:not(:last-child) {
  margin-right: 10px;
}

<div class="flex-container">
  <figure>
    <img class="md_khalil_uddin" src="https://picsum.photos/150/200" alt="Md. Khalil Uddin">
    <div class="team__social">
      <div>
        <img src="https://picsum.photos/40/60" alt="">
      </div>
      <div>
        <img src="https://picsum.photos/40/60" alt="">
      </div>
      <div>
        <img src="https://picsum.photos/40/60" alt="">
      </div>
      <div>
        <img src="https://picsum.photos/40/60" alt="">
      </div>
    </div>
    <figcaption class="figc1">Md. Khalil Uddin</figcaption>
    <figcaption class="figc2">Head of Ideas</figcaption>
  </figure>
</div>

При наведении

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --timing: 0.3s ease-in-out;
}

img {
  display: block;
  max-width: 100%;
}

figure {
  position: relative;
  border: 2px solid black;
  padding: 10px;
  cursor: pointer;
}

figure > img {
  margin: 0 auto;
}

figure::before {
  position: absolute;
  display: block;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  transition: opacity var(--timing);
}

figure:hover::before {
  opacity: 0.5;
}

.flex-container {
  display: flex;
}

.team__social {
  display: flex;
  position: absolute;
  --left: 50%;
  --top: 45%;
  left: var(--left);
  top: var(--top);
  transform: translate(calc( -1 * var(--left)), calc( -1 * var(--top)));
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
  transition: opacity var(--timing);
}

figure:hover .team__social {
  opacity: 1;
}

.team__social>* {
  min-width: 20px;
}

.team__social>*:not(:last-child) {
  margin-right: 10px;
}

.figcaption-container {
  margin-top: 10px;
}

<div class="flex-container">
  <figure>
    <img class="md_khalil_uddin" src="https://picsum.photos/150/200" alt="Md. Khalil Uddin">
    <div class="team__social">
      <div>
        <img src="https://picsum.photos/40/60" alt="">
      </div>
      <div>
        <img src="https://picsum.photos/40/60" alt="">
      </div>
      <div>
        <img src="https://picsum.photos/40/60" alt="">
      </div>
      <div>
        <img src="https://picsum.photos/40/60" alt="">
      </div>
    </div>
    <div class="figcaption-container">
      <figcaption class="figc1">Md. Khalil Uddin</figcaption>
      <figcaption class="figc2">Head of Ideas</figcaption>
    </div>
  </figure>
</div>

Answer 2

Реализация с появлением при :hover, а позиционирование выполнено на Flexbox.

figure .wrap {
  display: inline-flex;
  position: relative;
}

figure .wrap .team__social {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  background: rgba(0,0,0,.5);
  padding-bottom: 10%;
  box-sizing: border-box;
  opacity: 0;
  transition: all .3s linear;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

figure:hover .team__social {
  opacity: 1;
}

figure .wrap .team__social > img {
  display: block;
  width: 20px;
  height: 20px;
  background: #fff;
}

figure .wrap .team__social > img:not(:last-child) {
  margin-right: 5px;
}

<figure>
  <div class="wrap">
    <img class="md_khalil_uddin" src="https://via.placeholder.com/300" alt="Md. Khalil Uddin">
    <div class="team__social">
      <img src="img/facebook_logo.png" alt="">
      <img src="img/twitter_logo.png" alt="">
      <img src="img/google_plus_logo.png" alt="">
      <img src="img/linkedin_logo.png" alt="">
    </div>
  </div>
  <figcaption class="figc1">Md. Khalil Uddin</figcaption>
  <figcaption class="figc2">Head of Ideas</figcaption>
</figure>

<figure>
  <div class="wrap">
    <img class="md_khalil_uddin" src="https://via.placeholder.com/200" alt="Md. Khalil Uddin">
    <div class="team__social">
      <img src="img/facebook_logo.png" alt="">
      <img src="img/twitter_logo.png" alt="">
      <img src="img/google_plus_logo.png" alt="">
      <img src="img/linkedin_logo.png" alt="">
    </div>
  </div>
  <figcaption class="figc1">Md. Khalil Uddin</figcaption>
  <figcaption class="figc2">Head of Ideas</figcaption>
</figure>

<figure>
  <div class="wrap">
    <img class="md_khalil_uddin" src="https://via.placeholder.com/100" alt="Md. Khalil Uddin">
    <div class="team__social">
      <img src="img/facebook_logo.png" alt="">
      <img src="img/twitter_logo.png" alt="">
      <img src="img/google_plus_logo.png" alt="">
      <img src="img/linkedin_logo.png" alt="">
    </div>
  </div>
  <figcaption class="figc1">Md. Khalil Uddin</figcaption>
  <figcaption class="figc2">Head of Ideas</figcaption>
</figure>

БЛОГ НА HUSL

Как спозиционировать иконки соц. сетей поверх изображения?

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