Bootstrap 5中图片叠加文本显示异常求助：仅hover触发时文本正常显示

Got it, let's sort out this frustrating issue where your text over the images only pops up when you hover. Here's what's going wrong and how to fix it:

What's Causing The Problem? #

• No positioned parent for your text: Your .text-block uses position: absolute, but none of its parent elements (.zoom or the <a> tag) have position: relative. That means the text is positioning itself relative to the entire page, not the image container—and getting covered by the image as a result.
• Stacking context issues: The filter: opacity(60%) on your image creates a new stacking context, and without setting a higher z-index for the text, it sits behind the image until you hover (when .zoom:hover gets z-index:1, which lifts the whole container including the text).

Fixed Code & Changes #

First, update your CSS with these tweaks:

* { margin: 0; padding: 0; }

/* Text over image - added z-index to keep it above the image */
.text-block { 
  position: absolute; 
  top: 5%; 
  left: 5%; 
  color: black; 
  z-index: 2; 
}

/* Image styles - split opacity from filter for cleaner stacking */
.img { 
  width: 100%; 
  border-radius: 30px; 
  filter: drop-shadow(0 0 0.5rem grey);
  opacity: 0.6; 
}

/* Image container - added relative positioning to anchor the text */
.zoom { 
  margin: 10px; 
  transition: transform .5s; 
  position: relative; 
}

.zoom:hover { 
  transform: scale(1.1); 
  z-index: 1; 
}

Why This Works #

1. position: relative on .zoom: This tells the absolute-positioned .text-block to anchor itself to the image container, not the whole page. It also creates a local stacking context so we can control z-indexes inside the container.
2. z-index:2 on .text-block: Explicitly puts the text above the image (which defaults to z-index 0), so it's always visible regardless of hover state.
3. Split opacity from filter: Using a separate opacity property instead of cramming it into filter avoids creating an extra stacking context that could mess with element layering, and makes the code easier to read.

Quick note: You've got a tiny spelling error in your HTML—Personnal informations should be Personal informations!

内容的提问来源于stack exchange，提问作者ElFabinou