CSS3-эффект при наведении на изображение в меню навигации
Предлагаем вам познакомиться с разработкой интересного эффекта, проявляющегося при наведении на картинку в меню навигации. Этот эффект реализуется благодаря CSS3.
Замысел заключается в том, чтобы раскрывать круговую навигацию со стрелкой и пузырик с миниатюрой.
В предлагаемом примере отображаются в слайдере миниатюры предыдущей и следующей картинки. Эффект реализуется в CSS3 с помощью функции transitions.
Верстка
Для осуществления CSS3-эффекта предлагаем следующую структуру навигации:
1 2 3 4 5 6 7 8 9 10 | <div class="cn-nav"> <a href="#" class="cn-nav-prev"> <span>Previous</span> <div style="background-image:url(../images/thumbs/1.jpg);"></div> </a> <a href="#" class="cn-nav-next"> <span>Next</span> <div style="background-image:url(../images/thumbs/3.jpg);"></div> </a> </div> |
В предлагаемой демонстрационной версии мы разработаем шаблон iQuery и встроим в него миниатюры для предыдущей и следующей картинки в слайдере. Однако, прежде чем показать эффект развертки круга, нужно показать следующий элемент.
CSS-код
Предлагаем рассмотреть возможность добавления стилизации к навигации. Предположим, что у вас будет иметься относительный контейнер, зададим элементу ссылки позицию absolute. Ширина и высота составит 70 пикселей, поэтому у вас будет предостаточно места для реализации эффекта наведения:
1 2 3 4 5 6 7 8 9 10 11 12 | .cn-nav > a{ position: absolute; top: 0px; height: 70px; width: 70px; } a.cn-nav-prev{ left: 0px; } a.cn-nav-next{ right: 0px; } |
Разместим стрелки размером в 46 пикселей в ширину и высоту в роли фона с помощью элемента span. Для создания круга надо задать параметр border-radius со значением в половину ширины/высоты. Благодаря приему с 50% отрицательной маржины передвинем его в середине элемента ссылки. Затем назначим переход, учитывающий все параметры и длящийся 400 мс:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .cn-nav a span{ width: 46px; height: 46px; display: block; text-indent: -9000px; -moz-border-radius: 23px; -webkit-border-radius: 23px; border-radius: 23px; cursor: pointer; opacity: 0.9; position: absolute; top: 50%; left: 50%; background-size: 17px 25px; margin: -23px 0 0 -23px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; } |
Левая и правая стрелки в качестве фонового изображения элемента span:
1 2 3 4 5 6 | .cn-nav a.cn-nav-prev span{ background: #666 url(../images/prev.png) no-repeat center center; } .cn-nav a.cn-nav-next span{ background: #666 url(../images/next.png) no-repeat center center; } |
В роли фоновой картинки зададим Div с миниатюрой высотой и шириной в 0 пикселей. Кроме того, заданное абсолютное позиционирование разрешит его поместить в середине элемента ссылки. Марины и border-radius будут иметь начальные значения 0. Фоновая картинка зальет элемент полностью, потому что параметру background-size зададим 100%-ное значение высоты и ширины. Переход для этого элемента с функцией ease-out учтет все заданные параметры и будет длиться 200 мс:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .cn-nav a div{ width: 0px; height: 0px; position: absolute; top: 50%; left: 50%; overflow: hidden; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; margin: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } |
Далее определимся с внешним видом элементов при наведении.
Высота и ширина увеличатся до 100 пикселей, и нам нужно установить отрицательные маржины и углы с закруглением в половину данного значения. Чуть-чуть увеличим размер фоновой картинки, поменяем плотность изображения и цвет фона:
1 2 3 4 5 6 7 8 9 10 11 | .cn-nav a:hover span{ width: 100px; height: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; opacity: 0.6; margin: -50px 0 0 -50px; background-size: 22px 32px; background-color:#a8872d; } |
Теперь div-элемент для небольшой миниатюры расширится до 90 пикселей, поэтому в любом случае мы увидим элемент span, появляющийся в роли границы миниатюры. Кроме того, установим закругленные углы в половину ширины элемента, отрицательные маржины и увеличим размер фона:
1 2 3 4 5 6 7 8 9 | .cn-nav a:hover div{ width: 90px; height: 90px; background-size: 120% 120%; margin: -45px 0 0 -45px; -moz-border-radius: 45px; -webkit-border-radius: 45px; border-radius: 45px; } |
И вот, великолепный эффект реализован только благодаря CSS3! Ознакомьтесь с демо и вы увидите, как это смотрятся в слайдере миниатюры предыдущей и следующей картинки.
Надеемся, что вам понравился этот эффект и вы найдете ему интересное применение.
Посмотреть, как это все работает, можно здесь
Оцените статью по 5-бальной шкале: