Демонстрация Исходники

Каждый пункт меню (представлен в виде списка) представлен в виде ссылки с якорем, содержащий два тега span и изображение.

<ul class="mh-menu">
    <li>
        <a href="#">
            <span>Art Director</span>
            <span>Henry James</span>
        </a>
        <img src="images/1.jpg" <"image01"/>
    </li>
    <!-- ... -->
</ul>

Зададим классу .mh-menu блочное отображение и зададим цвет фона rgba(255,255,255, 0.8). При наведение на элемент списка зададим светло-синий цвет(225,239,240, 0.4).

.mh-menu li:hover a{
    background: rgba(225,239,240, 0.4);
}

Цвет второго span элемента также будет меняться при наведении курсора, но нам надо чтобы каждый пункт окрашивался в разные цвета. Для этого зададим эффект плавного перехода цвета для каждого пункта с помощью селектора nth-child:

.mh-menu li a span:nth-child(2){
    /*...*/
    transition: color 0.2s linear;
}
.mh-menu li:nth-child(1):hover span:nth-child(2){
    color: #ae3637;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
    color: #c3d243;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
    color: #d38439;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
    color: #8e7463;
}

Изображение будет сдвигаться в правую сторону, так что первоначально оно будет иметь нулевой отступ с левой стороны. Так же добавим эффект плавного перехода для прозрачности, котороые будет меняться от нуля до единицы.

.mh-menu li img{
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
    left: 300px;
    opacity: 1;
}

Вуаля, у нас получился интересный эффект выдвижения!
Убедитесь, что z-index у якорной ссылки больше чем у изображения, иначе изображение будет появляться под ним, а не над ним.

В качестве альтернативы, можно сделать, чтобы цвет фона якоря становился непрозрачным при наведении, то есть белым (второй пример) или был различным для каждого пункта (третий пример).

В демонстрации используются иллюстрации Bartosz Kosowski (CC BY-NC 3.0).

Источник урока