Question

我正在尝试制作一个简单的窗帘效果。当我们翻过卡片时（在这种情况下为图像），在转换的1秒内具有从该图像的顶部到底部的半透明层。我以前已经做过，现在我不明白自己在想什么。该代码非常简单，应该可以正常工作，我需要一个简单的解决方案，必须使用任何JavaScript或高级技术。

Codepen链接：https://codepen.io/jorgemonte/pen/rKvmpo

代码如下：

HTML：

<a class="card" href="">
<img class="image" src="https://www.w3schools.com/w3images/fjords.jpg" alt="">
</a>

CSS：

.card{
  display:inline-block;
  position:relative;
  border:1px solid black;
}

.image:before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background-color:rgba(0, 0, 0, 0.3);
    opacity:0;
    visibility:hidden;
    transform-origin:top center;
    transform: scale3d(1, 0, 1);
    transition:1s;
}

.card:hover .image:before{
    opacity:1;
    transform: scale3d(1, 1, 1);
    visibility: visible;
}

Answer 1

CSS pseudo-elements ::before和::after仅存在于能够生子的元素上。请参阅MDN中的此注释：

注意：::before和::after生成的伪元素是包含在元素的格式框中，因此不适用于替换的元素，例如<img>或<br>元素。

将::before移至.card div可以解决此问题：

.card {
  display: inline-block;
  position: relative;
  border: 1px solid black;
}

.card::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transform: scale3d(1, 0, 1);
  transition: 1s;
}

.card:hover::before {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  visibility: visible;
}

<a class="card" href="">
  <img class="image" src="https://www.w3schools.com/w3images/fjords.jpg" alt="">
</a>

使用纯CSS的悬停效果简单

1 个答案: