Title: Hover image submenu
Last modified: January 26, 2017

---

# Hover image submenu

 *  Resolved [Luc](https://wordpress.org/support/users/lull/)
 * (@lull)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/hover-image-submenu/)
 * Hi, I’m using your plugin, I like it, but I have a small problem :
    When I hover
   over the submenu, I would like the hovered image and not the other one. Do you
   have a solution for that ? thank

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [zviryatko](https://wordpress.org/support/users/zviryatko/)
 * (@zviryatko)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/hover-image-submenu/#post-8700567)
 * Hello, yes, it’s possible with magic of CSS 😉
    In few words, you need something
   like
 *     ```
       .main-menu ul li:hover img { visibility: hidden; }
       .main-menu ul li:hover img.hovered { visibility: visible; }
       ```
   
 * (it’s not 100% workable solution, I just show the way how to do it, and classes
   can be different, i.e. instead of `.main-menu` you can have `.nav-menu` or something
   like.
 *  Thread Starter [Luc](https://wordpress.org/support/users/lull/)
 * (@lull)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/hover-image-submenu/#post-8700826)
 * Thank you !
    But It doesn’t work for me : What I’m looking for : [http://prntscr.com/e0iuri](http://prntscr.com/e0iuri)
   The source code : [http://prntscr.com/e0iw8u](http://prntscr.com/e0iw8u)
 * I have tried :
    #access ul li:hover img { visibility: hidden; } #access ul li:
   hover img.hovered { visibility: visible; } doesn’t work… An idea ?
 *  [zviryatko](https://wordpress.org/support/users/zviryatko/)
 * (@zviryatko)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/hover-image-submenu/#post-8700838)
 * Try to use `img.hovered-image` instead of `img.hovered`
 *  Thread Starter [Luc](https://wordpress.org/support/users/lull/)
 * (@lull)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/hover-image-submenu/#post-8700889)
 * Yes ! It’s ok with that :
 *     ```
       #access ul li:hover img.menu-image {
           opacity:0; }
       #access ul li:hover img.hovered-image { opacity: 1; }
       ```
   
 * Must use opacity instead visibility.
 * Thanks a lot for your help and reactivity !
    -  This reply was modified 9 years, 4 months ago by [Luc](https://wordpress.org/support/users/lull/).
 *  [zviryatko](https://wordpress.org/support/users/zviryatko/)
 * (@zviryatko)
 * [9 years, 4 months ago](https://wordpress.org/support/topic/hover-image-submenu/#post-8701033)
 * Oh, yes, I forgot about `opacity`, I’ve used this property to make image disappear
   more slowly and beautiful than with just visibility…

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Hover image submenu’ is closed to new replies.

 * ![](https://ps.w.org/menu-image/assets/icon-128x128.png?rev=2123398)
 * [Menu Image, Icons made easy](https://wordpress.org/plugins/menu-image/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/menu-image/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/menu-image/)
 * [Active Topics](https://wordpress.org/support/plugin/menu-image/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/menu-image/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/menu-image/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [zviryatko](https://wordpress.org/support/users/zviryatko/)
 * Last activity: [9 years, 4 months ago](https://wordpress.org/support/topic/hover-image-submenu/#post-8701033)
 * Status: resolved