css 双击图片悬浮显示内容

CSS可以实现很多有趣的效果，比如当我们双击一张图片时，可以让它悬浮并显示一些内容。下面来看看具体的实现方法。

code>
    HTML代码如下：div class="picture-container">
      img src="picture.jpg" alt="图片" class="picture">
      div class="picture-description">
        p>
    这是一张漂亮的图片。/p>
      /div>
    /div>
CSS代码如下：.picture-container {
      position: relative;
}
.picture-description {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      padding: 20px;
      opacity: 0;
      transition: all 0.5s ease;
}
.picture-container:hover .picture-description {
      opacity: 1;
}
.picture-description p {
      font-size: 18px;
}
.picture {
      width: 100%;
      height: auto;
}
    /code>
    

这段代码中，我们首先在HTML中定义了一个div元素，并为它设置了类名为“picture-container”。在这个容器中，我们放置了一张图片和一个div元素，它的类名为“picture-description”。这个div元素中包含的是我们希望在图片悬浮时显示的内容。

在CSS中，我们设置了“picture-container”元素的定位为相对定位。这是为了让“picture-description”元素以父元素“picture-container”为坐标系进行定位。我们同时也设置了“picture-description”的定位模式为绝对定位，并将其放置在父元素的左上角。

我们给“picture-description”设置了一个半透明的黑色遮罩背景，并将其宽度和高度设置为100%，这样可以使整个容器都被遮住。为了让内容能够显示出来，我们将其透明度设置为0，并在容器悬浮时将透明度设置为1。

最后，我们将图片的宽度设置为100%，高度自适应，这样可以保证图片在容器中按比例缩放。

这样，我们就成功地实现了当双击图片时，悬浮显示内容的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！