How to Achieve a Smooth Ease-Out Effect for CSS Transitions on Image Hover?

CSS Transition Issue: Ease-In But Not Ease-Out

This question concerns the implementation of CSS transitions for images. When hovering over an image, the image blurs smoothly, but when the mouse leaves, it abruptly reverts to its original state. The desired behavior is for the image to ease out of the blur effect. Additionally, the question explores the possibility of displaying text on hover using only CSS.

Solution to Ease-Out

To achieve the desired ease-out effect, modify the CSS transition settings by applying them to the element itself, rather than to the :hover pseudo-class. This ensures that the transition takes place both when hovering on and off:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}</code>

Adding Text on Hover

To display text when hovering over an image using only CSS, utilize the :after pseudo-element:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:after {
  content: "Learn More";
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}
.img-blur:hover:after {
  display: block;
}</code>

By following these adjustments, the image will ease out of the blur effect when the mouse cursor leaves, and text will appear on hover.

The above is the detailed content of How to Achieve a Smooth Ease-Out Effect for CSS Transitions on Image Hover?. For more information, please follow other related articles on the PHP Chinese website!