Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Invert blur+darken on mouseover on project thumbnail

    Showcase
    3
    5
    799
    Loading More Posts
    • 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.
    • R
      Robertr last edited by

      Hey,
      is there a way to invert the mouseover blur + darken effect of a project thumbnail?
      Like that the defaut state of the thumbnail is blurry and darkened and on mouseover the blur disappears and it gets bright and normal.

      Any ideas?

      Thank you in advance!

      Best wishes,
      Robert

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Hi @Robertr
        there is not really a default feature to do this.

        But you could play around with this:

        .thumbnail-wrap:hover img {
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);
        }
        

        I hope I could help!

        All the best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • R
          Robertr last edited by

          Thank you very much Marius!! I think that will help.
          Another quick question though, is there a way to give the text on a project thumbnail (the project title) a dropshadow? And how can I see the class of such elements so that in the future maybe I can figure this stuff out by myself with my mediocre css skills …

          Thank you once again,
          Robert

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Hi @Robertr
            have a look here:
            http://laythemeforum.com:4567/topic/2224/underline-hover-effect-on-project-title-description/2

            and here:
            https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

            You can use the inspector of Google Chrome. It is just a right click on the page:
            0_1519327776789_Bildschirmfoto 2018-02-22 um 16.29.18.png

            Also try to make a course at Codeacademy. Beginner CSS is for free.

            All the best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • W
              walshmagger last edited by

              try this...css image shadow

              1 Reply Last reply Reply Quote 0
              • First post
                Last post

              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

              Thanks!

              Online Users

              T
              H

              Recent Topics

              • S

                New fade-in / opacity bug?

              • A

                Unable to update lay theme / to login wp admin

              • A

                New button feature not available

              • S

                Theme crashed - because of Polylang?

              laytheme.com