Use :hover CSS Pseudo-Class with Opacity Property to Create "Fade-in"/"fade-Out" Effect

Use the :hover CSS pseudo-class to change border effects in multiple ways on mouse-over

Use the "border-radius" CSS property to add rounded corners to elements

Use transition-delay CSS property to specify when an effect will start on mouse-over

Use the "filter" property in CSS to create blur effects on elements

Use the CSS background-image Property to Change Image on mouse-over

CSS Tips and Tricks on :hover Effects

The CSS "filter" property adds visual effects to an element. Consequently, you can create the "blur" effect on an element by using the syntax, "filter: blur()" in CSS. The "blur" filter creates a gaussian blur on the element. 

By specifying a number of pixels for the screen to blend into each other, you can change the intensity of the blur. The larger the value in pixels, the more intense the blur.

Hiro Nishimura: [0:00] Here, we have an image set to class="effect". In the style.css document, we'll create a hover effect for the image. To create the blur effect on an element we use the filter property. We can set the amount of blur that occurs using pixels. Let's try 5px.

[0:15] Now, if we refresh the page, the image should blur on mouseover because we set the blur filter effect to occur on hover. The larger the value in pixels we put in, the blurrier the element will be.

[0:26] Let's compare how a bigger pixel value influences how blurry an element becomes. I'll create another CSS class, this time named effect2. I will set the blur to 50px. Coming back to index.html, I insert another image with the class set to effect2.

[0:42] When we refresh the browser, we see that now there are two images, one set to the effect class with 5px blur and the other set to effect2 class with 50px blur.

[0:52] This works on other types of elements as well, like text. Let's put in some text and set it to the effect class. When we refresh the browser, we can see that this text blurs on hover, just like the images.

[1:02] We learned how to create the blur effect on an element in CSS by using the filter property and how to adjust how blurry we want the element to be using pixels. The larger the number of pixels, the blurrier the element becomes, as we can see in the example we worked with.

Course

CSS Tips and Tricks on :hover Effects

Use the "filter" property in CSS to create blur effects on elements

Share this video with your friends