CSS伪元素:before过渡效果失效问题求助

Hey Lance, great job getting the scale transition for .child working smoothly—let's fix the missing transitions for your gradient overlay and text link. The core issue here is you’re trying to animate between display: none and display: block, which browsers can’t do—transitions only work on properties with gradual, interpolatable values (like opacity, transform, or background color), not discrete "on/off" states like display.

Let’s break down the specific problems: #

• The .child:before pseudo-element uses display: none by default, then switches to display: block on hover. This is an instant state change, not something the browser can animate over time.
• The .products-link uses the same display trick, so its appearance can’t transition either— it just pops in/out instead of fading.

Here’s the fixed CSS code: #

.parent { 
  width: 100%; 
  margin: 20px; 
  height: 350px; 
  border-radius: 4px; 
  overflow: hidden; 
  cursor: pointer;
  position: relative; /* Critical: anchors absolute child elements to this container */
} 

.child { 
  height: 100%; 
  width: 100%; 
  background-size: contain; 
  background-repeat: no-repeat; 
  transition: all 1s; 
} 

.products-link { 
  opacity: 0; /* Replace display:none with opacity for smooth fading */
  visibility: hidden; /* Keeps element in layout but non-interactive when hidden */
  font-size: 18px; 
  font-weight: bold; 
  color: #ffffff !important; 
  font-family: sans-serif; 
  text-align: center; 
  margin: auto; 
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0; 
  height: 50px; 
  cursor: pointer;
  transition: opacity 1s, visibility 1s; /* Define transition for these properties */
} 

.parent:hover .child, 
.parent:focus .child { 
  transform: scale(1.2); 
} 

.parent:hover .child:before, 
.parent:focus .child:before { 
  opacity: 1; /* Fade in the gradient overlay */
  visibility: visible;
} 

.parent:hover span, 
.parent:focus span { 
  opacity: 1; /* Fade in the text link */
  visibility: visible;
} 

.child:before { 
  content: ""; 
  opacity: 0; /* Initial hidden state with opacity */
  visibility: hidden;
  height: 100%; 
  width: 100%; 
  position: absolute; 
  top: 0; 
  left: 0; 
  background: linear-gradient(to bottom,rgba(126,206,213,0.40) 25%,rgba(126,206,213,0.90) 100%);
  transition: opacity 2s, visibility 2s; /* Add transition for the pseudo-element */
} 

.bg-one { 
  background-image: url(https://cdn.mos.cms.futurecdn.net/vEcELHdn998wRTcCzqV5m9.jpg); 
  background-repeat: no-repeat; 
  background-position: center; 
}

Key improvements explained: #

1. Added position: relative to .parent—this ensures the absolute-positioned pseudo-element and text link stay contained within the parent, rather than positioning themselves relative to the entire page.
2. Replaced display: none/block with opacity: 0/1 and visibility: hidden/visible:
   • visibility: hidden prevents the element from being clickable when hidden, without removing it from the page layout (which avoids jarring shifts).
   • opacity lets the browser animate a smooth fade-in/out effect.
3. Added explicit transition properties to .products-link and .child:before to tell the browser how long to animate their state changes.

Now when you hover or focus on .parent, the gradient overlay and text link will fade in smoothly alongside the scale effect on .child!

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