hover图片pop-out弹出效果，两种纯CSS方法

2023-09-27 04:49:00

为了让网页更具视觉吸引力和交互性，设计师们发明了各种各样的鼠标悬停效果。其中hover图片pop-out弹出效果，因其简单而时尚的设计，备受广大设计师和用户的喜爱。

在这篇文章中，我们将向您介绍两种使用纯CSS实现hover图片pop-out弹出效果的方法。

实现原理

实现hover图片pop-out弹出效果的原理是，将主要图形的组成元素分为背景和前景图两个元素。背景元素通常是一张完整的图片，而前景图则是一张裁剪过的图片，用于在鼠标悬停时显示。当鼠标悬停在图片上时，前景图会从背景图中弹出，形成一种三维的效果。

方法一：使用`transform`属性

/* 背景图 */
.image-container {
  width: 200px;
  height: 200px;
  background-image: url("image.jpg");
}

/* 前景图 */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("image-overlay.jpg");
  transform: scale(0);
  transition: transform 0.5s ease-in-out;
}

/* 鼠标悬停时，前景图弹出 */
.image-container:hover .image-overlay {
  transform: scale(1);
}

在这个例子中，我们使用transform属性来缩放前景图。当鼠标悬停在图片上时，transform属性的值从scale(0)变为scale(1)，前景图就会从背景图中弹出。

方法二：使用`clip-path`属性

/* 背景图 */
.image-container {
  width: 200px;
  height: 200px;
  background-image: url("image.jpg");
}

/* 前景图 */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("image-overlay.jpg");
  clip-path: circle(0% at center);
  transition: clip-path 0.5s ease-in-out;
}

/* 鼠标悬停时，前景图弹出 */
.image-container:hover .image-overlay {
  clip-path: circle(100% at center);
}