show image when hovering over menu item

[crawling]

Hi,

I want to show a image when you hover over a submenu item in wordpress and make that image clickable .

For example :
menu 1
sub menu 1
sub menu 2

So when i hover over the word sub menu 1 or submenu 2 , i want an 70*70 image to display that can link to another page .

How can i accomplish that ?

[I.m.learning]

I thought there was a thread similar to what you are asking posted a few days ago.

But it might not be clickable.

[crawling]

I am not looking for fullscreen background but do you have the link to the tread so i can check it out ?

[tomnoble92]

Did a rough codepen on how to do this.

http://codepen.io/tomnoble92/pen/BQROpZ

this only works if the img is a child of the submenu. If it’s not a child you need Javascript or hack around it with a tick box.

[Shikkediel]

The example I think I.m.learning was referring to might not be easily adaptable for this particular case…

Link

[crawling]

Thanks , not what i am looking for .

[Shikkediel]

Maybe you could post the HTML markup…

[crawling]

Here is an live example of what i want

http://unitednews.sr/category/news/

when you hover over travel menu you get hotels, then royal torarica
now when you hover over royal torarica i want to show an image of that hotel .

[Paulie_D]

You really need to make an effort to do some additional research and make an attempt to code this for yourself.

If you have problems, create a codepen with what you have tried and we can help you over some of the jumps.

Posting vague uncoded requests is not encouraged here.

We’re happy to help, but we’re not going to write it for you.

[Shikkediel]

My hosting’s been down so my code tendencies had to be redirected anyway. Tom’s example was actually pretty much what is needed, with a few adjustments.

<li class="submenu">
  <a href="//www.google.com" target="_blank">
    <img src="http://lorempixel.com/70/70/">
  </a>
</li>

.submenu {
  width: 150px;
  height: 70px;
  position: relative;
  background: grey;
}

a {
  display: block;
  height: 100%;
}

img {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
}

.submenu:hover img {
  display: block;
}

Fork

Where li is any of the submenu items that have a nested link. Assuming the image should end up to the right of the list.

[tomnoble92]

Better codepen Shikkediel example I was in a rush so didn’t make the actual menu thought he could fill in the blanks haha.

[crawling]

This is what i tried to do , i gave the submenu a css class name “mitem1”

and added this into css :
.mitem1 li a:hover {
background-image: url("http://www.example.com/image.jpg");

[Shikkediel]

That would give (the text inside) the link a background image. Instead I think you should add an image inside the link as done above and give that the correct style. But where do you expect the image to show?

[crawling]

I don’t want an image inside the link , just want it to appear on the right when i hover over the menu item .

where do i add this code in wordpress ?

<li class="submenu">
<a href="//www.google.com" target="_blank">
<img src="http://lorempixel.com/70/70/">
</a>
</li>

[Shikkediel]

All you’d need to do is add the image – inside the existing a link in the submenu. Someone that knows the WP interface would have to tell you how…

Edit – I forgot the alt attribute on the image by the way. You probably wanna add that, like in the live example below the code.

[Author]

Posts