figcaption在img上显示，但是在img上悬停显示无形边框

好的，所以我有3个图像，边界在它们的中心。图像设置为.5不透明度，然后在悬停时显示1.0不透明度。我希望figcaptions和他们的边界始终保持在图像的顶部。现在，图案和边界位于图像下方，当我将鼠标悬停时，图像文字在图像前移动，图形边界向后移动。figcaption在img上显示，但是在img上悬停显示无形边框

这里是我的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; 

}

我知道这是怎样的一个乱七八糟的，对不起！有人能帮我吗？

来源

2015-11-18 Lauren

您遇到了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。希望有所帮助！

来源

2015-11-18 22:59:15

figcaption在img上显示，但是在img上悬停显示无形边框

回答

相关问题