html - figcaption 显示在 img 上，但 figcaption 边框在悬停时显示在图像后面

Question

好的，所以我有 3 张图片，图片中间有边框。图像设置为 0.5 不透明度，然后在悬停时设置为 1.0 不透明度。我希望图形说明及其边框始终位于图像之上。现在，图形说明及其边框位于图像下方，当我将鼠标悬停时，图形说明文本移动到图像前面，图形说明边框移动到后面。

这是我的 HTML:

 <section class="icons">
               <div id="logo-container">
               <figure>
        <img src="/Users/laurenkunz/Desktop/Design Projects/laurenkunz.com/logoicon-01.png" alt="Logo design photo" height="32">
        <figcaption class="logodesigncaption">Logo Design</figcaption>
  </figure></div>
    <div id="invitation-container"><figure>
      <img src="laurenkunz.com/invitationicon-01-01.png" alt="Invitation design photo" width="541">
      <figcaption class="invitationscaption">Invitations</figcaption>
    </figure></div>
      <div id="website-container"><figure>
        <img src="laurenkunz.com/websitesicon-01.png" alt="Website design photo" width="639">
        <figcaption class="websitedesignicon">Website Design</figcaption>
      </figure></div>
      </section>
</div>

这是我的 CSS:

#logo-container img{
    width:400px;
    display: inline-block;
    opacity: .5;
    filter: alpha(opacity=50);/*For IE and earlier*/
}

#invitation-container img{
    width: 400px;
    display:inline-block;
    opacity: .5;
    filter: alpha(opacity=50);/*For IE and earlier*/
}

#website-container img{
    width: 400px;
    display:inline-block;
    opacity: .5;
    filter: alpha(opacity=50);/*For IE and earlier*/
}
.icons  img{
    height: 400px;;
    display: inline-block;
    margin: 10px;
}
#logo-container img:hover{
    opacity: 1.0;
    filter: alpha(opacity=100);/*For IE and earlier*/
}
#invitation-container img:hover{
    opacity: 1.0;
    filter: alpha(opacity=100);/*For IE and earlier*/
}
#website-container img:hover{
    opacity: 1.0;
    filter: alpha(opacity=100);/*For IE and earlier*/
}


#logo-container{

    border-style: solid;
}
#invitation-container{

    border-style: solid;

}
#website-container{

    border-style:solid;
}

.icons, #website-container, #logo-container, #invitation-container{

min-width: 500px;
margin: 10px;
display:inline-block;
}

figcaption{
border-style: solid;
font-size: 36px;
display: table-caption;
width: 250px;
padding: 10px 20px 20px;
margin: -220px 100px 100px 75px;
text-align: center;

}

我知道这有点乱，抱歉!有人可以帮助我吗？

Answer 1

您遇到了 CSS 中 opacity 属性的一个相对不为人知(并且常常令人沮丧)的怪癖。 Opacity values than than 1 change the stacking context of the item they're on .

如果我正确理解了您的初始陈述，那么像下面的 CSS 这样的东西应该可以解决您的问题:

figcaption {
    position: relative;
    z-index: 2;
}

如果您仍然遇到问题，提供示例 CodePen 或 JSFiddle 将帮助我们准确地确定问题并提出更准确的 CSS。希望对您有所帮助!