[alphaint]

I’ve figured out how to add blur to images with:

filter: blur(8px);

But I don’t understand where to put the custom css to unblur the image on hover. When I add this to the styles for an image block, nothing happens.  Help?

-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-moz-transition: 1s filter linear;
-ms-transition: 1s -ms-filter linear;

[tikaram]

@alphaint : To remove the blur effect on hover please add the following custom css.
To know more about adding custom css in Block Themes Please follow the link below.
https://catchthemes.com/fse-faq/how-to-add-custom-css-in-block-themes/

.wp-block-post-featured-image:hover img {
  transform: scale(1) !important;
}
.wp-block-post-featured-image a:hover::before {
  opacity: 0 !important;
}

Let me know if you have any more questions.

Regards,
Tikaram

[alphaint]

I added the additional code to the custom CSS.  It didn’t have any effect on the blurred images.

 

I’m specifically using the cover image with text on top.  When I add the custom CSS to the cover element, it also blurs the text.  Is there a way to point directly to the image on the cover element?

[tikaram]

@alphaint :Can you please post in your site URL and provide me more details where you would like to remove the blur effect on hover so that I can check it on your site and provide you the required fix.

Regards,
Tikaram

[Author]

Posts