利用纯css实现缩略图悬停效果实例代码

2023年5月28日下午2:56 • JavaScript

下面是利用纯CSS实现缩略图悬停效果的完整攻略。

确定页面布局

首先需要确定页面布局，可以使用HTML和CSS代码实现。通常情况下会使用一个列表来存放所有的缩略图，并设置每个列表项的宽度和高度，如下所示：

<ul class="thumbnail-list">
  <li>
    <a href="#">
      <img src="image1.jpg" alt="">
      <div class="thumbnail-overlay">
        <p>图片标题</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="image2.jpg" alt="">
      <div class="thumbnail-overlay">
        <p>图片标题</p>
      </div>
    </a>
  </li>
  <!-- ... -->
</ul>

然后在CSS中为列表项、图片和悬停时的效果进行设置。例如：

ul.thumbnail-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

ul.thumbnail-list li {
  flex: 1;
  margin: 0;
  padding: 10px;
  list-style: none;
  text-align: center;
}

ul.thumbnail-list li a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

ul.thumbnail-list li img {
  display: block;
  width: 100%;
  height: auto;
}

.thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.thumbnail-overlay p {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  color: #fff;
}

实现悬停效果

完成页面布局后，就可以开始实现悬停效果了。我们使用:hover伪类来控制鼠标悬停时的效果。例如：

ul.thumbnail-list li:hover .thumbnail-overlay {
  opacity: 1;
}

上述代码指定了当鼠标悬停在列表项上时，对应的.thumbnail-overlay元素的透明度会从0变为1。

下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>利用纯CSS实现缩略图悬停效果实例代码</title>
    <style>
      ul.thumbnail-list {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
      }

      ul.thumbnail-list li {
        flex: 1;
        margin: 0;
        padding: 10px;
        list-style: none;
        text-align: center;
      }

      ul.thumbnail-list li a {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
      }

      ul.thumbnail-list li img {
        display: block;
        width: 100%;
        height: auto;
      }

      .thumbnail-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.25s ease-in-out;
      }

      .thumbnail-overlay p {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 18px;
        color: #fff;
      }

      ul.thumbnail-list li:hover .thumbnail-overlay {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <ul class="thumbnail-list">
      <li>
        <a href="#">
          <img src="https://picsum.photos/200/300?random=1" alt="">
          <div class="thumbnail-overlay">
            <p>图片1</p>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://picsum.photos/200/300?random=2" alt="">
          <div class="thumbnail-overlay">
            <p>图片2</p>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://picsum.photos/200/300?random=3" alt="">
          <div class="thumbnail-overlay">
            <p>图片3</p>
          </div>
        </a>
      </li>
    </ul>
  </body>
</html>

示例1：修改鼠标悬停触发方式

有时为了提升用户体验，我们需要将列表项的鼠标悬停触发方式由默认的直接悬停改为一个稍微延迟一点的方式。例如，当用户鼠标快速移动时，我们不希望出现中断和意外的效果。

我们可以通过CSS的transition-delay属性来实现这个效果。transition-delay属性指定从悬停到效果变化开始的延迟时间。例如：

ul.thumbnail-list li .thumbnail-overlay {
  opacity: 0;
  transition: opacity .25s ease-in-out 0.1s;
}

上述代码将transition-delay设置为0.1s。这意味着当用户鼠标悬停时，会等待0.1秒后才开始显示悬停效果。

示例2：添加缩放效果

另一个常见的悬停效果是添加缩放动画。这使得图片变大或变小，对用户的视觉体验更加生动和有趣。

我们可以在:hover伪类中，使用transform属性来实现缩放效果。例如：

ul.thumbnail-list li:hover {
  transform: scale(1.1);
}

上述代码指定当鼠标悬停在列表项上时，对应的列表项将会放大10%。

如果希望在缩放过程中不变形，可以使用CSS的transform-origin属性指定变换的基点。例如：

ul.thumbnail-list li:hover {
  transform: scale(1.1);
  transform-origin: center bottom;
}

上述代码指定以列表项的底部中心点为基点进行缩放。这样，缩放效果看起来会更加自然。

综上所述，以上就是利用纯CSS实现缩略图悬停效果的完整攻略。在代码实现时，我们需要首先确定页面布局，然后利用CSS控制悬停效果的动画和样式。同时，我们还可以通过一些技巧来改变鼠标悬停触发方式和添加缩放效果等。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用纯css实现缩略图悬停效果实例代码 - Python技术站

利用纯css实现缩略图悬停效果实例代码

确定页面布局

实现悬停效果

示例1：修改鼠标悬停触发方式

示例2：添加缩放效果

相关文章