倾斜div悬停效果优化：不影响内部图片的CSS实现求助

Hey there! Let's sort out your hover effect issue on the skewed div without messing up the inner image. Here's how to fix it step by step:

Your original code has two key problems: the skew transform is distorting your image, and the hover effect only triggers when you target the invisible .content element (which isn't user-friendly). We'll fix both with these adjustments:

Updated CSS Code #

.overlay-box {
  position: relative;
  width: 150px;
  height: 150px;
  display: inline-block;
  overflow: hidden; /* Keeps our skew effect contained */
  /* Removed the direct skew here — we'll use a pseudo-element instead */
}

/* Create the skewed background with a pseudo-element (doesn't affect inner content) */
.overlay-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff; /* Adjust this if you need a base background color */
  transform: skew(-10deg);
  z-index: -1; /* Puts the skew behind the image and content */
}

.overlay-box img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* Ensures the image scales nicely without distortion */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex; /* Easier vertical/horizontal centering than padding */
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* Combine transitions so both properties animate together */
  transition: background-color 0.7s ease-in-out, opacity 0.7s ease-in-out;
}

/* Trigger hover when the entire box is moused over (not just .content) */
.overlay-box:hover .content {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.8);
}

.info {
  font-size: 6vh;
  text-decoration: none;
}

.content a {
  color: white;
  text-decoration: none;
}

Updated HTML Code #

<div class="overlay-box">
  <img src="img/bg1.jpg" alt="Background image">
  <div class="content">
    <a href="#" class="info">Your Content Here</a>
  </div>
</div>

Key Changes Explained #

• Pseudo-element for skew: By applying skew to a pseudo-element instead of the main .overlay-box, we keep the image and inner content perfectly straight while maintaining the skewed container look.
• Hover on the entire box: Changing the hover trigger to .overlay-box:hover .content means users can hover anywhere on the box to activate the effect, not just the invisible overlay.
• Combined transitions: Your original code had two separate transition properties, which meant only the last one worked. Combining them ensures both opacity and background color animate smoothly.
• Flexbox centering: Ditching padding-top: 50% for flexbox makes the inner link center perfectly regardless of the box size.

This setup will give you a skewed container with a crisp, undistorted image, and a reliable hover effect that activates across the entire box!

内容的提问来源于stack exchange，提问作者André Alan Alves