Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • 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. overlay effect on hover with image

overlay effect on hover with image

Scheduled Pinned Locked Moved General Discussion
4 Posts 2 Posters 399 Views
  • 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 Offline
    A Offline
    alessiarodler
    wrote on last edited by
    #1

    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
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by
      #2

      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
      0
      • A Offline
        A Offline
        alessiarodler
        wrote on last edited by
        #3

        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
        0
        • RichardR Offline
          RichardR Offline
          Richard
          Global Moderator
          wrote on last edited by Richard
          #4

          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
          0
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          I also code custom websites or custom Lay features.
          šŸ’æ Email me here: šŸ’æ
          info@laytheme.com

          Before you post:
          1. When using a WordPress Cache plugin, disable it or clear your cache.
          2. Update Lay Theme and all Lay Theme Addons
          3. Disable all Plugins
          4. 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:
          1. Post a link to where the problem is
          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
          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