Question

当我将鼠标悬停在卡片上时，我想在我的img上添加一个透明层，我已经完成了那部分，但是我希望它被切割成img而不是覆盖卡片上的页脚。如果这样做了吗？

这是Hover的卡片。正如你在卡片上看到的那样，img只覆盖了90％的卡片，我希望悬停叠加层做同样的事情

Card when not hover IMG Card when hover IMG

   .card {
   position:relative;
   width: 350px;
   height: 335px;
   background-size: contain;
   background-repeat: no-repeat;
   background-color: #fff;
   border-radius: 5px;
   margin: 30px;
   float: left;
   }

   #card_oslo{
   background-image: url(img/oslo.jpg);
   }
   #card_oslo:hover{
   box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);
   transition: .5s;
   }

Answer 1

您可以将叠加设置为

position: absolute;
top: 0;
bottom: XXpx;
left: 0;
right: 0;

其中XX是页脚高度，然后它将覆盖整个卡片并使底部x像素自由。您也可以使用％值而不是px。

如果您希望叠加层包含文字，则需要将其放入一个额外的div中，然后您可以将其用作叠加层。

我在这里制作了简化版https://jsfiddle.net/0L9fL1pj/

Answer 2

您应该使用pseudo-element。使用:after或:before并将其设置为完整尺寸，同时将父级设置为position:relative;，然后更改opacity上的伪元素的hover。

工作Demo。

＆＃13;

.box {
  position:relative;
}
.box:after {
  content:"";
  /* Set the element as full-size */
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  /* Set bg and hide the element + animation */
  background-color:#000;
  opacity:0;
  transition: all 0.5s ease 0s;
}
.box:hover:after {
  /* Show the overlay on hover */
  opacity:0.5;
}

/* For the demo */
.box {
  width:200px;
  height:200px;
  background-color:red;
}

＆＃13;

<div class="box"></div>

＆＃13;

Answer 3

一直在寻找类似的解决方案，并且由于该线程无法得到正确的答案（没有一个建议的答案将我带到了我想要的位置，我对此表示怀疑），但是我在这里得到了一些重要的线索，我想我会提供当前的解决方案，所以任何人有类似问题的人可以受益。

我在这里做了一个简单的演示：https://jsfiddle.net/Tdesign/2ynuajk0/14/

HTML：

<div id="imgBox2" class="shade">
        <img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" width="350" height="335" loading="lazy" >
    </div>

CSS：

    #imgBox2 {
    position: relative;
    width: 500px;
}

    .shade:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 500px;
    background-color: rgba(0,0,0,0.5);
}

悬停++文本时img上的透明层

3 个答案: