HiDocs

效果：鼠标放上去有边线的渐变展示！参考网站效果jquery之家：http://www.htmleaf.com/

1.figcaption标签

<figcaption> 是 HTML 中用于定义图像的标题或说明的元素，通常与 <figure> 元素一起使用。它提供了一个简短的文本描述，用于解释图像的内容或提供其他相关信息。<figure> 元素通常包裹图像或其他媒体内容，而 <figcaption> 元素用于提供图像的标题或说明。

以下是一个示例，演示了如何在 HTML 中使用 <figure> 和 <figcaption> 元素：

html

<figure>
  <img src="image.jpg" alt="一个示例图像">
  <figcaption>这是一个示例图像的说明文本。</figcaption>
</figure>

在上面的示例中，<figure> 元素包含了一个图像（<img>）以及与之相关的说明文本（<figcaption>）。这有助于提供更多的上下文和信息，帮助用户理解图像的内容，特别是对于视障人士来说，alt 属性提供了对图像的替代文本，而 <figcaption> 则提供了更详细的描述。

<figcaption> 元素可以包含任何适当的文本，用于描述图像或其他媒体内容，以满足您的需求。

2.进行代码编写

有很多坑：

1.display:none到block这种从无到有是无法应用上transtion的，我们改用opacity或者visibility

2.被遮住的情况下，hover事件可能会失效

3.上级的hover操作下级的样式一般比较灵敏，而自己本身可能会没效果

总之坑特别多，但是大概的思路都是使用伪元素去作文章，在不影响原本的主元素的基础上！

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .tp {
      width: 250px;
      height: 158px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
    }

    p {
      position: relative;
      color: #fff;
      font-size: 14px;
      margin: 5px;
    }

    .effect-bubba {
      background: rgba(53, 172, 197, 1);
      position: relative;
      z-index: 1;
      display: inline-block;
      overflow: hidden;
      width: 100%;
      height: 100%;
      cursor: pointer;
      margin: 0;
    }

    .img {
      position: relative;
      transition: all 0.3s linear;
      display: inline-block;
    }

    .figcaption {
      opacity: 0; /* 这里不能用display:none，否则transtion不生效！ */
      text-transform: uppercase;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 30px;
      color: #fff;
      text-transform: uppercase; /*文本转换属性，用于将文本中的字符转换为大写字母*/
      backface-visibility: hidden; /*元素的背面不可见，当元素被旋转或者不可见时，背面内容不会显示*/
      box-sizing: border-box;
      transition: all 0.3s linear;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .figcaption::before { /*控制上下边线的before伪元素*/
      /* transition: transform 0.3s ease, opacity 0.3s ease; 可以写在一起*/ 
      transition: all 0.3s linear;
      position: absolute;
      width: calc(100% - 60px);
      height: calc(100% - 60px);
      top: 30px;
      right: 30px;
      bottom: 30px;
      left: 30px;
      content: '';
      visibility: hidden; /* 这里opacity不太好使 */
      border-top: 1px solid #fff; /*利用边框线实现线条变化效果*/
      border-bottom: 1px solid #fff;
      transform: scale(0, 1);
      /* 水平压缩为0 */
    }

    .figcaption::after { /*控制左右边线的after伪元素*/
      transition: all 0.3s linear;
      position: absolute;
      width: calc(100% - 60px);
      height: calc(100% - 60px);
      top: 30px;
      right: 30px;
      bottom: 30px;
      left: 30px;
      content: '';
      visibility: hidden; /* 这里opacity不太好使 */
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
      transform: scale(1, 0); /* 垂直压缩为0 */
    }

    .effect-bubba:hover .figcaption {
      opacity: 1;
    }

    .effect-bubba:hover .figcaption::before {
      opacity: 1;
      visibility: visible;
      transform: scale(1);  /* 在单方向扩展大小，利用border的伸缩达到相关效果！ */
    }

    .effect-bubba:hover .figcaption::after {
      visibility: visible;
      transform: scale(1); /* 在单方向扩展大小，利用border的伸缩达到相关效果！ */
    }

    .effect-bubba:hover .img {
      transform: scale(1.1);
    }

    .link-click {
      z-index: 1000;
      text-indent: 200%;
      white-space: nowrap;
      font-size: 15px;
      opacity: 0;
    }
  </style>
</head>

<body>
  <div class="tp">
    <figure class="effect-bubba">
      <img class="lazy img" src="http://img.htmleaf.com/2310/202310261628.jpg"
        data-original="http://img.htmleaf.com/2310/202310261628.jpg" width="250" height="158" alt="JS和CSS3超酷开关按钮动画特效">
      <figcaption class="figcaption">
        <p> 247 </p>
        <p> CSS3动画</p>
        <p>Read More</p>
        <a href="http://www.htmleaf.com/css3/css3donghua/202311016109.html" class="link-click">点击查看详细内容</a>
      </figcaption>
    </figure>
  </div>
</body>

</html>

1.figcaption标签 ​

2.进行代码编写 ​

1.figcaption标签

2.进行代码编写