Tips and methods to use CSS to achieve blur effects when the mouse is hovering

Techniques and methods of using CSS to achieve blur effects when the mouse is hovering

In modern web design, dynamic effects are important to attract the user's attention and enhance the user experience Experience matters. Mouseover effects are one of the common interactive effects that can make a website more vivid and eye-catching. This article will introduce how to use CSS to achieve blur effects when the mouse is hovering, and give specific code examples.

1. Use the CSS filter attribute to set the blur effect

In CSS3, we can use the filter attribute to achieve various image special effects, including blur effects. First, we need to define a CSS class to describe the special effects when the mouse hovers. For example, we can define a class named "blur-effect":

.blur-effect {
filter: blur(5px);
}

In the above code , the filter attribute is set to blur(5px), which means the image will be blurred by 5 pixels. You can adjust the degree of blur as needed, such as increasing the blur radius.

2. Define hover effect animation

In CSS, we can use the CSS animation library to define specific animation effects. For mouse hover effects, we can use CSS:hover pseudo-classes and transition attributes to achieve animation effects.

First, we need to apply the blur effect to the mouse-over element. Taking pictures as an example, we can apply the above .blur-effect class to the CSS class of the picture:

.img-container {
transition: filter 0.5s ease;
}

.img-container:hover {
filter: blur(5px);
}

In the above code, we set the transition attribute to filter 0.5s ease, indicating the transition effect The duration is 0.5 seconds, and the transition effect is smooth. When the mouse is hovering, the filter attribute is set to blur(5px) through the :hover pseudo-class, that is, the image is blurred by 5 pixels.

3. Define recovery effect

In order to make the special effect smoother and more natural, we can set a recovery effect for the special effect, that is, when the mouse leaves, the special effect gradually disappears.

We can use the reverse property of the transition effect to achieve this effect. Add the following code to the above .img-container class:

.img-container {
transition: filter 0.5s ease;
}

.img-container: hover {
filter: blur(5px);
}

.img-container:hover:not(:hover) {
transition: filter 0.5s ease;
filter: blur(0px);
}

In the above code, we use the :hover pseudo-class to define the special effects when the mouse hovers. Then use the :not(:hover) selector to define the special effect when the mouse leaves, and set the filter attribute to blur(0px), which cancels the blur effect.

To sum up, we can use the filter property and animation effect of CSS to achieve the blur effect when the mouse is hovering. By defining specific CSS classes and implementing transition effects through :hover pseudo-classes and transition attributes, special effects can be made smoother and more natural. The following is a complete code example:

HTML code:

<div class="img-container">
  <img src="example.jpg" alt="example image">
</div>

CSS code:

.blur-effect {
  filter: blur(5px);
}

.img-container {
  transition: filter 0.5s ease;
}

.img-container:hover {
  filter: blur(5px);
}

.img-container:hover:not(:hover) {
  transition: filter 0.5s ease;
  filter: blur(0px);
}

Through the above code example, we can implement mouse hovering in the web page Blur effects. When the user hovers over the image, the image will gradually blur; when the mouse leaves, the image will gradually return to its original state, bringing a smooth and natural experience.

Summary:

Using the filter property and animation effect of CSS, we can easily achieve the blur effect when the mouse is hovering. By defining specific CSS classes and combining the :hover pseudo-class and transition attributes, we can control the display and disappearance of special effects and improve user experience. In practical applications, the degree of blur effect and the duration of transition effect can be flexibly adjusted according to needs, making the special effects more outstanding and attractive.

The above is the detailed content of Tips and methods to use CSS to achieve blur effects when the mouse is hovering. For more information, please follow other related articles on the PHP Chinese website!