Now we are going to show you the way to vary your menu by adding an accurate effect when mouse-pointing on it. The main idea is about smooth image display while mouse-pointing a menu paragraph.
Every menu item will have an anchor, containing two spans and images:
Then we have to stylize our list. We`ll give .mh-menu the background color RGBA (255 255 255, 0,8), meanwhile mouse-pointing will change the font-color to RGBA (225 239 240, 0.4):
The second step is to give all the list elements another color when mouse-pointing:
The image will start apearing on the right side, first being located at the left side. We’ll also add a smooth transparency transformation from 0 (starting point) to 1:
That`s all, and now we have a nice sliding effect! Make sure that anchor`s z-index is located above the image, not above it. In addition, we can make the anchor`s background non-transparentwhile mouse-pointing: fully white (demo 2), or give every menu item a different color (demo 3).