Hover icon over images

[DanielMT]

Hi,

I've tried for hours, but didn't work.

I wanted to display an icon (magnifying glass or similar) when hovering an image, without the need to install plugins or similar.

Just CSS and working with default WordPress galleries.

Any help?

Thanks in advance.

[Victor Font]

You would use cursor: url("/path/to/icon.png"), auto; in your hover css.

https://css-tricks.com/using-css-cursors/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[DanielMT]

Hi Victor,

Thanks, but was not talking about the cursor. Attached an screenshot: https://www.screencast.com/t/M6OasBU8L7A

Thanks anyway.

[Victor Font]

So that's not a cursor. It's an overlay. The way that this is usually accomplished is with a combination of jQuery and CSS. When you hover over an image, jQuery adds or removes a CSS class. The CSS class has the code for displaying the overlay. The search icon is displayed in the overlay's before pseudo element and positioned so it's centered in the overlay. It can also be done in pure CSS.

It would probably take a couple of hours to write the code to make this work well on your site. As a volunteer on this site, I'm not willing to put in the kind of time this requires to provide code for you. But there are plenty of tutorials on the web that can get you started in the right direction.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[DanielMT]

Hi Victor,

I've read tons of tutorials, but none of them worked for me.

Usually they put a div/span after the image (in the html code), and that div/span is shown/hidden when hovering the image. But WordPress galleries don't work like that, there are no div/span that you can use for that overlay.

That's why I was asking for help.

Thanks anyway.

[Author]

Posts