How to Achieve Smooth Transitions for Blurred Images on Hover with CSS?

Easing Out CSS Transitions for Blurry Images

When hovering over an image with the CSS :hover pseudo-class, applying a blur filter using the filter property creates a visually appealing effect. However, it is commonly observed that the image reverts to its normal state abruptly upon mouse removal. This behavior can be attributed to the lack of an "ease-out" effect during the transition phase.

To resolve this issue and ensure a smooth transition in both directions, it is crucial to apply the transition properties to the actual element, rather than solely to the :hover pseudo-class. This allows the transition to occur smoothly when hovering on and off the element.

Example:

Consider the following code snippet:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  filter: blur(4px);
}</code>

This updated example demonstrates how applying the transition properties to the .img-blur class instead of the :hover pseudo-class yields a transition that operates in both directions.

Additional Enhancements:

Another common requirement is to overlay text on the blurred image when the mouse hovers over it. While this can be achieved using JavaScript, CSS methods offer a more efficient and lightweight solution. Here's how:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
  position: relative;
}
.img-blur:hover {
  filter: blur(4px);
  position: absolute;
  z-index: 1;
}
.img-blur:hover .text-overlay {
  display: block;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
  display: none;
}</code>

This code introduces a .text-overlay element, which is hidden by default. When hovering over the image, the :hover pseudo-class activates, making the overlay visible and aligning it over the blurred image. This approach provides greater control over the styling of the text overlay.

The above is the detailed content of How to Achieve Smooth Transitions for Blurred Images on Hover with CSS?. For more information, please follow other related articles on the PHP Chinese website!