如何在 hover 上使用深色叠加背景的图像上叠加透明文本？

Question

Title is a bit of a mouthful. I've just started with CSS and am trying to achieve the effect a text overlay while the image is still transparent behind the text.

Below is what I've managed to achieve by snipping together various bits of code I've found. I am struggling to get the dark overlay the same size as the image. I haven't used any margin or padding on the overlay or image so have no clue why it's happening. I've also tried several ways to align the text so it sits vertically in the middle but have had no such luck.

 .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. For the first issue You will not able to center the overlay on to the image because the image isn't actually 200px x 200px because there are transparent pixels around the image. so first crop the transparent pixels around the image and get it's real size. Then replace the 200px size in the css below to the appropriate size.

2. I have corrected your code snippet to be able to center the text by adding display: flex and align-content: center (for vertical alignment) and justify-content: center (for horizontal alignment),

3. I have also added overflow: hidden to the .image-container.after to prevent overflowed text and changed the text size to 60px for better visibility.

 .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>