Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Thumbnail blur without blurring edges

Thumbnail blur without blurring edges

Scheduled Pinned Locked Moved General Discussion
6 Posts 3 Posters 623 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • N
    N
    nic
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • N
      N
      nic
      wrote on last edited by
      #2

      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.

      1 Reply Last reply
      1
      • arminunruhA
        arminunruhA
        arminunruh
        Global Moderator
        wrote on last edited by
        #3

        nice, well found!

        1 Reply Last reply
        0
        • C
          C
          caromo
          wrote on last edited by
          #4

          Hey,

          When you add this code or a simple blur to the thumbnails. When have a dark background, creates a white gradation on the borders. There's any solution? Without zoom in.

          Thanks :)

          Captura de pantalla 2024-01-19 a les 9.30.48.png image url)

          1 Reply Last reply
          0
          • arminunruhA
            arminunruhA
            arminunruh
            Global Moderator
            wrote on last edited by
            #5

            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

            1 Reply Last reply
            0
            • C
              C
              caromo
              wrote on last edited by
              #6

              hmmm okey, I will try!

              1 Reply Last reply
              0

              Hello! It looks like you're interested in this conversation, but you don't have an account yet.

              Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

              With your input, this post could be even better 💗

              Register Login
              Reply
              • Reply as topic
              Log in to reply
              • Oldest to Newest
              • Newest to Oldest
              • Most Votes


              Online Users
              Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
              laytheme.com
              • Login

              • Don't have an account? Register

              • Login or register to search.
              • First post
                Last post
              0
              • Recent
              • Tags
              • Popular
              • Users
              • Search