悬停每个图像时有一个透明（不是背景）

Question

我有这个代码

<div class="photo">
<img src="images.jpg">
<div class="text">Its transparent</div>
</div>

我试过这个css

.text{
    opacity:0.8;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

还有这个

.text{
    background: rgba(0, 0, 0, 0.28) none repeat scroll 0 0;
    color: #fff;
    position: relative;
    top: -240px;
    width:100%;
    height:100%
}

我想在 images（不是背景）中使用透明背景的文字。我确实有一个透明的，但它没有覆盖整个图像。我已经尝试过了，但不适用于我。

Allow a div to cover the whole page instead of the area within the container

Background images: how to fill whole div if image is small and vice versa

Have a background image with a transparent colour

Answer 1

您可以设置.photo { position: relative; }，然后将position: absolute; 设置为.text

div.photo .text {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

试穿：https://jsfiddle.net/mmouze3n/1/

编辑 1 -

通过:before添加模糊叠加

div.photo .text {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  text-align: center;
  font-size: 26px;
  color: #fff;
  z-index: 1;
  webkit-transition: .3s;
  transition: .3s;
}
div.photo:hover .text { font-size: 100px; color: #000; }

div.photo:before {
  display: inline-block;
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color:#ccc;
  opacity: 0;
  z-index: 0;
  webkit-transition: .3s;
  transition: .3s;
}
div.photo:hover:before {
  opacity:0.8;
}

JSFiddle：https://jsfiddle.net/mmouze3n/2/