Как наложить прозрачный текст на изображение темным фоном наложения при наведении?

Question

Заголовок звучит непонятно. Я только начал с CSS и пытаюсь добиться эффекта наложения текста, в то время как изображение все еще остается прозрачным за текстом.

Ниже показано, чего мне удалось достичь, соединяя различные фрагменты код, который я нашел. Я изо всех сил пытаюсь получить темный оверлей того же размера, что и изображение. Я не использовал поля или отступы на наложении или изображении, поэтому понятия не имею, почему это происходит. Я также пробовал несколько способов выровнять текст так, чтобы он располагался вертикально посередине, но мне не повезло.

.image-container {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.border {

  border-radius: 50%;
}

.image-container .after {
  position: absolute;

  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
  border-radius: 50%;
}

.image-container:hover .after {
  display: block;
  background: rgba(0, 0, 0, .6);
  border-radius: 50%;
}

#title {
  background: url('https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png');
  background-size: cover;
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  padding: 0;
  display: flex;


}

h1 {
  font-size: 80px;
  font-family: sans-serif;
  text-align: center;
  text-shadow: 0 0 1px rgba(0, 0, 0, .1);
  margin: 0;
  padding: 0;
 
  letter-spacing: -1px;
  line-height: 0.8;

}

<div class="image-container">
  <img src="https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png" class='border' />
  <div class="after">

    <div id="title">


      <h1><b>ONE<br>TWO</b></h1>
    </div>

  </div>
</div>

Answer 1

1. Для первой проблемы. Вы не сможете центрировать оверлей на изображении, потому что изображение на самом деле не 200 x 200 пикселей, потому что вокруг изображения есть прозрачные пиксели. поэтому сначала обрежьте прозрачные пиксели вокруг изображения и получите его реальный размер. Затем замените размер 200 пикселей в css ниже на соответствующий размер.

2. Я исправил фрагмент кода, чтобы можно было центрировать текст, добавив display: flex и align-content: center (для вертикального выравнивания) и justify-content: center (для горизонтального),

3. Я также добавил overflow: hidden к .image-container .after, чтобы предотвратить переполнение текста и изменил размер текста на 60px для лучшей видимости.

.image-container {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.image-container .after {
  position: absolute;
  display: none;
  left: 0;
  bottom: 0;
  overflow: hidden;
  color: #FFF;
}

.image-container:hover .after {
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  border-width: 0px;
  width: 200px;
  height: 200px;
}

#title {
  background: url('https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png');
  background-size: cover;
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  padding: 0;
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
}

h1 {
  font-size: 60px;
  font-family: sans-serif;
  text-align: center;
  text-shadow: 0 0 1px rgba(0, 0, 0, .1);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  letter-spacing: -1px;
  line-height: 0.8;
}

<div class="image-container">
  <img src="https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png" class='border' />
  <div class="after">

    <div id="title">


      <h1><b>ONE<br>TWO</b></h1>
    </div>

  </div>
</div>