Show hover image in menu

  • Hello, I would like to know if it’s possible to show an image/gif when hovering my menu “titles”. For example, if I put my mouse over “Home” I want to show an image of a house that can overflow the menu too.

    I am able to give a css class for each menu title in my current theme (evolve) but I don’t know how to customize the CSS…

    Hope somenone can help me, thank you a lot.

    Best regards.

    • This topic was modified 2 years, 8 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 5 replies - 1 through 5 (of 5 total)

  • Do you have any design examples that you’re trying to accomplish?

    Thread Starter fasican

    (@fasican)

    Hello, thanks for your reply.

    When I drag my mouse over “Home(Inicio)” I would like to display an image like this screenshot (I don’t really need the frames) IMAGE

    I don’t know if it’s helps but as I said, with my current theme I am able to give a css class for each menu title.

    CUSTOM CSS THEME:

    .image-swap:hover{
     background-image:url("https://myurl.png");
overflow-wrap: break-word;
	z-index:9999;
}

    That’s all can I do… the image doesn’t overflow the menu and I don’t know how to fix it. IMAGE_BAD

    Thank you so much @vijayhardaha

    You can use ::after or ::before` and then create css for it and set the background image on that maybe that could work.

    Thread Starter fasican

    (@fasican)

    Sorry but im not an expert in CSS, you mean to do that?

    .image-swap:hover::after{
     background-image:url("https://myurl.png");
overflow-wrap: break-word;
	z-index:9999;
}

    or

    .image-swap:hover::before{
     background-image:url("https://myurl.png");
overflow-wrap: break-word;
	z-index:9999;
}

    It is not working for me, I don’t know if that is what u want me to do, sorry ??

    No, you’ll have to set position absolute and width, height, content, z-index, top, left as well. then it will work. also need parent element position:releative.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Show hover image in menu’ is closed to new replies.