Thumbnail blur without blurring edges
-
wrote on Aug 22, 2022, 8:05 PM last edited by
Hey everyone,
the current blur mouse-over effect for thumbnails blurs the thumbnail together with its edges. Is it possible to blur the thumbnail within a "mask" so that the thumbnail edges stay sharp?
Thanks
-
wrote on Aug 26, 2022, 11:07 AM last edited by
Hey,
Little update: I searched the forum again and when using other keywords I managed to find the answer to my question:
Thread with the answer. And the relevant CSS classes:
.thumbnail-wrap:hover img, .thumbnail-wrap:hover video { -webkit-filter: blur(20px); -moz-filter: blur(20px); -o-filter: blur(20px); -ms-filter: blur(20px); filter: blur(20px); }
Thanks @mariusjopen for adding the code snippet in the other thread. I adjusted it to also work for video thumbnails.
-
nice, well found!
-
wrote on Jan 19, 2024, 8:38 AM last edited by
-
ahh maybe you can add a custom html class and then add a black background somehow using custom css?
maybe that would make a difference but im not sure
-
wrote on Jan 23, 2024, 9:47 AM last edited by
hmmm okey, I will try!
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it