Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS show image when hovering over menu item Reply To: show image when hovering over menu item

#248177
Shikkediel
Participant

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.