CSS将鼠标悬停在图片上的文字

我正在关注悬停效果的教程，其中文本弹出并且背景变黑。教程here。CSS将鼠标悬停在图片上的文字

我有一个悬停效果的小问题，当鼠标悬停在图像上时，我希望图像变暗并覆盖整个图像，当我将ul.img-list li设置为高度100％它只占用了文本的100％，我可以将高度设置为图像的高度，但当高度根据窗口大小而变化时，将无法正确覆盖。我错过了什么吗？

image example

HTML：

<div class="column large-6"> 
    <ul class="img-list"> 
    <li> 
     <a href="#"> 
     <img src="https://www.ricoh.com/r_dc/r/r8/img/sample_08.jpg" /> 
     <span class="text-content"> 
      <span>[email protected]!</span> 
     </span> 
     </a> 
    </li> 
</ul>

CSS：

ul.img-list { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 
ul.img-list li { 
    display: inline-block; 
    height: 100%; 
    margin: 0 1em 1em 0; 
    position: relative; 
    width: 100%; 
} 
span.text-content { 
    background: rgba(0,0,0,0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 150px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 150px; 
} 

span.text-content span { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

span.text-content { 
    background: rgba(0,0,0,0.5); 
    color: white; 
    cursor: pointer; 
    display: table; 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 150px; 
    opacity: 0; 
    -webkit-transition: opacity 500ms; 
    -moz-transition: opacity 500ms; 
    -o-transition: opacity 500ms; 
    transition: opacity 500ms; 
}

这里是我的jsfiddle - http://jsfiddle.net/f32kn4h5/

来源

2015-04-01 TJXStyles

这个问题是相关的，也许它会帮助.. http://stackoverflow.com/questions/18322548/black-transparent -overlay-on-image-hover-with-only-css – 2015-04-01 15:58:17

这是非常有帮助的，加到最爱，谢谢！ – TJXStyles 2015-04-01 16:03:29

小提琴似乎适合我。 Nevermind不，它不 – Steve 2015-04-01 16:09:19

我认为你看到你的小提琴后，你的问题的一部分是，你的父div没有一个高度属性设置为静态。如果你尝试改变跨度造型说，300px，你会看到它改变：

span.text-content { 
    height: 300px; 
}

另外，设置文本范围的高度，以100％或某事的每一位家长，但高度必须存在于每一位家长：

<div class="column large-6"> //set to 100% or something 
    <ul class="img-list"> //set to 100% or something 
    <li> //set to 100% or something 
     <a href="#"> 
     <img src="https://www.ricoh.com/r_dc/r/r8/img/sample_08.jpg" /> 
     <span class="text-content"> 
      <span>[email protected]!</span> 
     </span> 
     </a> 
    </li> 
</ul>

这应该使其工作，这里是更新了自己的提琴：http://jsfiddle.net/f32kn4h5/3/

来源

2015-04-01 16:05:54

CSS将鼠标悬停在图片上的文字

回答

相关问题