Lay Theme Forum

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

    overlay effect on hover with image

    General Discussion
    2
    4
    83
    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.
    • A
      alessiarodler last edited by

      Hey there,

      there is a way to create a simple overlay effect on mouse hover with a linked image?
      I already tried some CSS, but it doesn't function well. Actually I have this problem with the homepage of my web site https://www.alessiarodler.com/

      Thank you!

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

        Dear @alessiarodler

        I see on hover a colour change is occuring
        As for "this Problem" i do not know what part is specifically the problem sorry,

        Screen Shot 2020-08-27 at 4.25.06 PM.png

        Is it possible to show an example of an overlay effect that you desire?

        As well as specifying the problem?

        Let me know :)

        Best wishes
        Richard

        1 Reply Last reply Reply Quote 0
        • A
          alessiarodler last edited by

          Dear @Richard-Keith

          I wanted to put a background color while hovering on a linked image, I just managed to do it with project-thumbnails, but still don't know how to do it with simple linked images.
          Here there is an example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_icon
          (obviously I don't need the icon in my site)

          Thank you very much for your feedback!

          Alessia

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

            Dear @alessiarodler

            Ah yes! :)
            You website is down right now i think?

            Screen Shot 2020-08-31 at 5.32.52 PM.png

            So i cant relate it to something specific on your site but i can send you in the right direction:

            So the "hover" function in CSS

            https://www.w3schools.com/cssref/sel_hover.asp

            You can target any element on a webpage and have something occur when you move the mouse cursor over that element "hover" over it.

            So what is happening in
            https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_icon

            Is they have a container that holds two boxes - an image and basically a box that holds a block color,
            The image is visible but the Coloured box has an "opacity" of "0" meaning it is invisible, when the mouse cursor 'hovers' over the image, the box is given an "opacity" of "1" making it visible!

            This is the basics behind the example you provided,

            Let me know further

            Best Wishes
            Richard

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

            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

            Thanks!

            Online Users

            T
            G
            I
            A
            M
            K
            C

            Recent Topics

            • C

              centred Carousel fixed width and proportions

            • text underline

            • open all links in a thumbnail grid in a new tab

            • lazy loading affects project thumbnail mouseover images

            laytheme.com