如何实现类似kizi.com的图片边框动画及图标悬停弹窗效果

Hey there! Let's tackle both of these interactive frontend effects you're looking for. I'll walk you through each one with clear code examples and explanations so you can implement them smoothly.

1. 图片边框动画效果 #

Since you mentioned a reference image, I'll create a versatile border animation that's common in such designs—a hover-triggered animated border that sweeps around the image. This works for static or hover states, and you can tweak the timing/colors to match your reference.

HTML Structure #

<div class="image-container">
  <img src="your-image.jpg" alt="Sample image" class="animated-border-img">
</div>

CSS Styles #

.image-container {
  position: relative;
  width: 300px; /* Adjust to your image size */
  height: 200px;
  overflow: hidden;
}

.animated-border-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Animated border layer */
.image-container::before,
.image-container::after,
.animated-border-img::before,
.animated-border-img::after {
  content: "";
  position: absolute;
  background: #ff6b6b; /* Border color */
  transition: all 0.4s ease;
}

/* Top and bottom borders */
.image-container::before,
.image-container::after {
  left: 0;
  width: 100%;
  height: 2px;
}
.image-container::before { top: 0; transform: translateX(-100%); }
.image-container::after { bottom: 0; transform: translateX(100%); }

/* Left and right borders */
.animated-border-img::before,
.animated-border-img::after {
  top: 0;
  width: 2px;
  height: 100%;
}
.animated-border-img::before { left: 0; transform: translateY(100%); }
.animated-border-img::after { right: 0; transform: translateY(-100%); }

/* Hover state: animate borders into view */
.image-container:hover::before { transform: translateX(0); }
.image-container:hover::after { transform: translateX(0); }
.image-container:hover .animated-border-img::before { transform: translateY(0); }
.image-container:hover .animated-border-img::after { transform: translateY(0); }

Key Notes #

• Adjust width/height in .image-container to match your image dimensions
• Change background color to match your reference's border color
• Tweak the transition duration (0.4s) to make the animation faster/slower

2. 复刻目标网站的悬停效果（弹出文本+边框动画） #

This effect combines the border animation above with a hover-triggered text overlay that slides in with a background. Here's how to build it:

HTML Structure #

<div class="game-card">
  <img src="game-icon.jpg" alt="Game icon" class="game-img">
  <div class="game-overlay">
    <h3 class="game-title">Sample Game</h3>
    <p class="game-desc">Fun arcade action for all ages!</p>
  </div>
</div>

CSS Styles #

.game-card {
  position: relative;
  width: 250px; /* Match target site's card size */
  height: 300px;
  cursor: pointer;
  overflow: hidden;
}

.game-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Border animation (similar to part 1, adjusted for cards) */
.game-card::before,
.game-card::after,
.game-img::before,
.game-img::after {
  content: "";
  position: absolute;
  background: #4ecdc4; /* Target-style border color */
  transition: all 0.4s ease;
}

.game-card::before, .game-card::after {
  left: 0;
  width: 100%;
  height: 3px;
}
.game-card::before { top: 0; transform: translateX(-100%); }
.game-card::after { bottom: 0; transform: translateX(100%); }

.game-img::before, .game-img::after {
  top: 0;
  width: 3px;
  height: 100%;
}
.game-img::before { left: 0; transform: translateY(100%); }
.game-img::after { right: 0; transform: translateY(-100%); }

/* Hover state for borders */
.game-card:hover::before,
.game-card:hover::after,
.game-card:hover .game-img::before,
.game-card:hover .game-img::after {
  transform: translate(0, 0);
}

/* Overlay with text */
.game-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  color: white;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.game-title {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.game-desc {
  margin: 0;
  font-size: 0.9rem;
}

/* Hover state: slide overlay up */
.game-card:hover .game-overlay {
  transform: translateY(0);
}

/* Optional: slightly zoom the image on hover */
.game-card:hover .game-img {
  transform: scale(1.05);
}

Key Notes #

• The overlay slides up from the bottom, matching the target site's behavior
• The border animation triggers at the same time as the overlay for a cohesive effect
• Adjust the background color of .game-overlay to match the target site's exact shade
• Tweak transform: scale(1.05) to control how much the image zooms on hover

内容的提问来源于stack exchange，提问作者user9313011