Custom placeholder/image loading
-
Hey! Been trying to find a solution how to get images (or thumbnails) load with custom "blurry" effect like this: https://codepen.io/jmperez/pen/yYjPER.
Now stuck in Custom Css in Lay options, cant figure it out how to get it working.. Maybe its a bigger case? im not very good at css (yet)!
Thanks!
-Andy -
img.lazyloading{ filter: blur(50px); opacity: 1!important; /* this is needed so Safari keeps sharp edges */ transform: scale(1); } img.lazyloaded{ transition: filter 300ms ease 300ms, opacity 300ms ease; filter: blur(0); }
Try this one.
Play with the 300ms numbers to get different timings.
-
Thank you so much @arminunruh! It works, but now, image flickers once when entering lightbox. Any ideas how to fix that?
'Never show resized versions of your images' is enabled in Lay+lightbox options.-A
-
Hi Andy,
can you provide us with a link to the website?All the best!
Marius
I don't answer or check forum DMs, please just post on the forum.
Try this to fix issues before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it