Title: Active menu effect
Last modified: August 21, 2016

---

# Active menu effect

 *  Resolved [anur](https://wordpress.org/support/users/anur/)
 * (@anur)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/active-menu-effect/)
 * Hi
    My site needs a normal image and plus an active menu image which changes 
   when you are on that menu page…
 * Is there tweak in the code by which the imageuploaded for hover can be used for
   the on active menu
 * Anur
 * [http://wordpress.org/plugins/menu-image/](http://wordpress.org/plugins/menu-image/)

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

 *  [zviryatko](https://wordpress.org/support/users/zviryatko/)
 * (@zviryatko)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/active-menu-effect/#post-4319639)
 * Hi, anur.
 * To show hovered image on menu page just add to file style.css of your active 
   theme this few strings:
 *     ```
       .menu-item.current-menu-item a.menu-image-hovered .menu-image-hover-wrapper img.hovered-image {
           opacity: 1;
       }
       ```
   
 *  [neowang](https://wordpress.org/support/users/neowang/)
 * (@neowang)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/active-menu-effect/#post-4319655)
 * Hi Alex,
 * I don’t think Anur is looking for a transparency affect.
 * I have same requirement. Let me give an example: the menu image is grey.jpg, 
   but it changes to white.jpg when it’s the current menu item.
 * Neo
 *  [zviryatko](https://wordpress.org/support/users/zviryatko/)
 * (@zviryatko)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/active-menu-effect/#post-4319658)
 * I know, just try to add this code and see what is happen.
 * For better transparent effect I place the second image over the first, and hid
   the second image with opacity:0, so for .menu-item.current-menu-item just add
   opacity:1 and this should solve the problem.
 * Or have I got it all wrong again?
 *  [neowang](https://wordpress.org/support/users/neowang/)
 * (@neowang)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/active-menu-effect/#post-4319666)
 * Hi Alex,
 * You’re awesome! It works.
 * I didn’t see how it would work because your plugin doesn’t ask for the hover 
   image until the menu is saved. After I saved the menu, added hover image and 
   saved a again, the CSS just works!
 * The only change I made to the CSS is I used current-menu-ancestor instead of 
   current-menu-item because there is no current-menu-item on top level in my case.
 * Here is my css:
 *     ```
       .menu-item.current-menu-ancestor a.menu-image-hovered .menu-image-hover-wrapper img.hovered-image {
           opacity: 1;
       }
       ```
   
 * Thank you Alex!
 * Neo
 *  [zviryatko](https://wordpress.org/support/users/zviryatko/)
 * (@zviryatko)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/active-menu-effect/#post-4319667)
 * You are welcome!

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

The topic ‘Active menu effect’ 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/)

## Tags

 * [active menu](https://wordpress.org/support/topic-tag/active-menu/)

 * 5 replies
 * 3 participants
 * Last reply from: [zviryatko](https://wordpress.org/support/users/zviryatko/)
 * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/active-menu-effect/#post-4319667)
 * Status: resolved