Check out this awesome page I found: where you can see a neat list of blog posts displayed in rows of 4.
I've added a cool jQuery animation to the 'cards' so that they fade in one by one:
jQuery('.fade-in-post-container .elementor-post').hide();
jQuery('.fade-in-post-container .elementor-post').each(function(i) {
setTimeout(()=>{jQuery(this).show().addClass('animated fadeInUp')}, 250 * i);
});
Everything works smoothly, but I'm facing an issue where some images develop a white border on the top and bottom once they finish loading after fading in.
Here's an example:
https://i.sstatic.net/9tU51.png
Interestingly, the white strips disappear if I slightly shrink the browser window size. It's quite puzzling and I'm not sure how to pinpoint the problem, let alone fix it. Attempts to replicate the issue on JSfiddle are proving challenging due to the complex styles and HTML structure.
If you have any insights or solutions, I would greatly appreciate your help!
Thank you for taking the time to read this.