Bottom part of the images became blurry in my blog posts

When I inspected your website, I noticed that the images are using “lazy” loading, which might be causing the issue. If you’re using a plugin for lazy loading or image optimization, try deactivating it and see if the problem persists.

Hello @choonthen ,

I have checked your website and I found the issue

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
    -webkit-backdrop-filter: blur(0px) !Important;
    backdrop-filter: blur(0px) !Important;
    content: "";
    height: 100%;
    -webkit-mask-image: linear-gradient(0deg, #000 20%, #0000);
    mask-image: linear-gradient(0deg, #000 20%, #0000);
    max-height: 40%;
}

just add this css into additional just go to the appearance > customize > additional css and then paste this css

Hi@linaasenova

I tried deactivating the plugins one by one and saw no improvement in the images.

My blog posts contain a lot of photos. I use an image resizer (icecream) that I purchase to reduce the image size from 2-4 MB per image down to about 400 KB before inserting them into my blog posts. These resized images look good before I insert them.

When the website was designed, I was told by the developer that the images would be resized automatically (I do not have to manually resize them) but I had resized the images using the icecream image resizer instead.

• This reply was modified 4 days, 6 hours ago by choonthen.

Hi@asadz,

Thank you for the input.

I am not a developer and know nothing about CSS. So, I am a bit nervous about inserting any CSS until I understand what has caused this situation and what your proposed code means. Could you elaborate a bit on why I have these blurry images?

Is there any other easier way I can fix this without tempering with the CSS?

@choonthen I think the blur might be caused by a WordPress gallery feature that adds a gradient mask and blur effect to images with captions for better readability. Could you try removing the caption from one of the images to see if this helps?

NOTE: Most probably, overriding the CSS would be necessary to fully resolve the issue. If you’re not comfortable making changes yourself, it would be best to reach out to your developer for assistance.

• This reply was modified 4 days, 6 hours ago by Lina Asenova.
• This reply was modified 4 days, 6 hours ago by Lina Asenova.

Hi Lina (@linaasenova),

I think you are right. I compared images with and without captions. Those without captions are clear. For my blogs, I do not want to delete the captions because they are part and partial of the story-telling. I find it hard to understand though that the latest version of WordPress would force this default on all their users unless they change the CSS.

Hello @choonthen ,

No worries here is the video link below you will easily check the video and paste the CSS : https://go.screenpal.com/watch/cZX31TnVzt3

Hi @asadz,

Thank you so much for the guidance.

I have inserted the code you provided. I checked some of the posts and the images in the Public View are now good. However, these blurry images are still on my admin screens. Is that normal?

Can you please share the video so I will explain more better

Hi@asadz,

Below are the codes in “Additional CSS” after appending your codes to the end:

.header .menu {
padding-top: 20px;
}

.header-container #titlebar h1, .header-container.basic #titlebar h1, .header-container.basic #titlebar.centered h1, .header-container #titlebar h2, .header-container.basic #titlebar h2, .header-container.basic #titlebar.centered h2 {
line-height: 60px;
}

h1, h2, h3, h4, h5, h6 {
line-height: 1.5;
}

/Azrul/
.gutter-30px .isotope-item h3{
font-size:20px;
}
.gutter-30px .isotope-item p{
font-size:14px;
}

.vc_col-sm-12 .vc_gitem-col h4 {
font-weight:bold;
font-size:20px;
}

.vc_col-sm-12 .vc_gitem-col p {
font-size:14px;
}

/button inside homepage post start/
.vc_btn3.vc_btn3-color-juicy-pink, .vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat {
color:#44b272;
background-color:transparent !important;
padding-left:0px
}

.vc_btn3.vc_btn3-color-juicy-pink, .vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat:hover {
color:#666;
background-color:transparent !important;
}
/button inside homepage post end/

/button bottom outside home page start/
.vc_btn3.vc_btn3-color-white, .vc_btn3.vc_btn3-color-white.vc_btn3-style-flat {
color: #44b272;
}

.vc_btn3.vc_btn3-color-white, .vc_btn3.vc_btn3-color-white.vc_btn3-style-flat:hover{
color: #666;
background:transparent;
}
/button bottom outside home page start/

/post content box start/
.vc_col-sm-12 .vc_gitem-col {
background-color: #fff;
border: 1px solid #e0e0e0;
border-top: none;
border-radius: 0 0 3px 3px;
}
/post content box end/
.vc_gitem-zone {
border-radius: 3px 3px 0 0;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.06);
}
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
-webkit-backdrop-filter: blur(0px) !Important;
backdrop-filter: blur(0px) !Important;
content: "";
height: 100%;
-webkit-mask-image: linear-gradient(0deg, #000 20%, #0000);
mask-image: linear-gradient(0deg, #000 20%, #0000);
max-height: 40%;
}

 

Sorry, I don’t know how to send a video here.

Hello @choonthen ,

this is not clear. I have post a comment in this link check let me know

https://perfectthen.com/see-the-new-south-korea-in-20-days-seoul/#comment-4476

@choonthen Yes, this was related to a WordPress update – per https://github.com/WordPress/gutenberg/pull/63471

All you need to do is make it display: none.

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
display: none;
}