webdonsk.ruКак сделать увеличение кнопки при наведении
Добавил пользователь Евгений Кузнецов Обновлено: 10.09.2024
На этом уроке мы разберем три разных эффекта при наведении на кнопку.
Посмотрите демо на CodePen
HTML разметка
Создадим в разметке три разных блока и и обернем в контейнер с классом wrapper для выравнивания их по центру. Один блок - одна кнопка.
Замена цвета кнопки при наведении (эффект 1)
Создадим кнопку слева.
.buttonLeft:hover::before transform: translateX(0); // показываем псевдоэлемент
>
.buttonLeft span position: relative;
z-index: 1; // текст сверху
>
Изменение положения кнопки при наведении (эффект 2)
При наведении мыши на центральную кнопку, нужно выпавшую кнопку вернуть обратно в рамку.
// при наведении возвращаем кнопку в свою рамку
.buttonOverlay:hover::before transform: translate(6px, -4px);
>
Нажатая вниз кнопка при наведении (эффект 3)
Этот эффект напоминает сжатую пружину при наведении мыши. Когда мы уводим мышь с кнопки, то пружина отжимается. Весь секрет в обнулении толщины нижней рамки при наведении.
.pressDown:hover border-bottom-width: 0; // обнуление толщины рамки
margin-top: 3px;
>
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
При создании этого мануала, моей целью было взять три десятка различных эффектов, частью — довольно распространенных, частью — придуманных мной, разместить их от простых к более сложным, и на их примере показать новичкам, никогда не имевшим дело с CSS3 возможностями, как эти возможности работают и как их применить на практике. Именно по этой причине статья вышла подробная, пошаговая, мне было важно описать и разобрать каждую деталь.
Демо материалы лежат здесь.
Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.
Подготовка к работе.
Итак, для того, чтобы создавать наши эффекты нам понадобится вот такая простая дефолтная html-структура:
Для большей части эффектов она останется неизменна, но кое-где нам придется внести ряд изменений. У нас есть div-контейнер с классом .effect, внутри которого помещаем картинку и контейнер с классом .caption, содержащий заголовок, описание и, как в данном случае, кнопку “View More”. Разумеется, структуру менять можно, главное, тогда сделать соответствующие изменения и для CSS-кода.
Дефолтные css-стили для нашей структуры (опять же, в зависимости от того, какой мы будем рассматривать эффект, они будут различаться):
Чтобы этого добиться, нужно, в первую очередь, переместить этот контейнер выше, за пределы контейнера с эффектом. Для этого мы изменим ему свойство top, и стили для блока теперь будут выглядеть так:
Следующим шагом будет добавление к .caption свойства transition. transition показывает, какое именно свойство будет изменяться, насколько быстро, с какой задержкой.
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
Первое значение устанавливает имя стилевого свойства, которое будет отслеживаться для изменения. В данном случае мы выставили all — отслеживаться будут все свойства. Второе — отвечает за время, необходимое для анимации. Третье — за то, как в течение времени, заданного вторым свойством, будет распределяться скорость перехода: где замедлится, где ускорится. Так, например, в данном случае сначала анимация будет быстрее, к середине замедлится и ближе к концу выйдет на равномерную скорость. Четвертое значение определяет, начнется анимация с задержкой или нет. Если значение равно 0s — задержки нет.
Кроме того, для этого свойства нам надо будет добавить вендорные префиксы. необходимые для корректного отображения анимации в браузерах. Как это выглядит:
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Chrome и Safari
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Opera
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для IE
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Firefox
В статье, для краткости, я буду опускать префиксы, но не забывайте добавлять их для таких свойств, как transition, transform и transform-origin. В коде примеров под кнопкой CSS (или в самих файлах) префиксы тоже есть.
Итак, мы добавили почти все, что необходимо для создания эффекта: начальные условия и условия перехода в конечную точку, осталось добавить только стили для самой конечной точки.
Чтобы добиться такого эффекта, внесем изменения в html-структуру. Нам необходимо создать пустой div-контейнер с классом .overlay для блока, выезжающего снизу вверх:
Внесем изменения в стили для .caption. Изменим его положение для выдвижения сверху вниз, уменьшим прозрачность вдвое, чтобы сохранить итоговое значение прозрачности фона (в конечном итоге, у нас будут накладываться друг на друга два блока), добавим z-index, чтобы показать, какой из двух блоков будет “выше” при наложении:
Добавим стили для .overlay.
Осталось только определить конечную точку трансформаций: .caption опускается до top: 0px, а .overlay, наоборот, поднимается до этого же значения:
А вот в css-стили изменения внести понадобится. В первую очередь, необходимо сместить заголовок и кнопку в центр .caption, чтобы задать начальную точку для последующего перехода. Кроме того, необходимо добавить этим элементам свойство transition, поскольку сейчас именно они являются объектами анимирования:
Теперь, если мы зададим конечную точку анимации:
мы получим не самый красивый результат. Полупрозрачная подложка никуда не делась, элементы кучкуются в центре и неэстетично оттуда разъезжаются. Поскольку, с помощью transition, можно изменять не только положение элемента, но и, например, его прозрачность, благодаря ей мы сможем скрыть и подложку, и элементы в центре до момента, пока не понадобится их подвинуть.
Добавляем прозрачность и transition к .caption:
Таким образом, сейчас .caption мы спрятали, и чуть позже настроим так, чтобы он появлялся только при наведении мыши. Необходимо добавить прозрачность и для всех элементов внутри .caption, и код для них будет выглядеть так:
Теперь на hover будет происходить следующее: прозрачность .caption и элементов внутри нее сменится с opacity: 0 на opacity: 1, одновременно с чем начнет меняться местоположение заголовка и кнопки:
В остальном, все остается аналогичным.
html-структуру оставляем базовой. Что касается изменений в таблице стилей, уменьшающимся элементам мы должны добавить свойство transform. Transform позволяет трансформировать элементы: вращать, менять им размеры, наклонять, перемещать, комбинировать несколько свойств для создания более сложных эффектов. Для этих эффектов мы разберем уменьшение/увеличение элементов.
Необходимое для такой трансформации значение свойства transform — scale(x,y), где значение x — изменение размеров объекта по горизонтали, а y — по вертикали соответственно. Если мы применим это свойство для
Как видите, у значения scale в данном случае не два параметра, а один, и это означает, что и по горизонтали, и по вертикали наш элемент увеличен в два раза.
Теперь на hover наша задача уменьшить эти элементы до их нормального размера, что мы и делаем, добавляя эти стили:
остается на своем месте и размеры не меняет, для него стили остаются стандартные. Что касается
и , наша задача — переместить их наверх и вниз соответственно и уменьшить в размерах:
Теперь надо задать transition, но тут встает такой вопрос: элементы должны сначала — опуститься и лишь после — увеличиться в размерах, то есть, нужно задать transition для опускания элементов без задержки и transition с задержкой для увеличения.
Задать больше одного стилевого свойства для transition — просто: мы всего лишь перечисляем их через запятую, не забыв указать все параметры для каждого свойства:
transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;
Добавим это правило к остальным стилевым правилам:
Задаем конечную точку трансформаций:
Осталось только скрыть .caption по образу и подобию двух предыдущих эффектов:
Чтобы “крутить” элементы, свойству transform необходимо задать значение — rotate и его параметры. Какие параметры есть у значения rotate? Во-первых, ось вращения: X, Y или Z. Во-вторых, количество градусов, на которое будет повернут элемент. Так, например, если мы хотим повернуть элемент по оси Y на 30 градусов, выглядеть правило будет следующим образом:
transform: rotateY(30deg);
html-структура остается базовой, равно как и стили для
Теперь при наведении мыши элемент крутанется на вышеобозначенное количество градусов. Но хотелось бы, чтобы он не только крутился, но и, в отсутствие hover, исчезал, а на hover не только вращался, но и “выплывал”. Для этого добавим еще один transform со значением scale. Чтобы добавить элементу два и более значений transform, не нужно писать правило дважды, мы просто ставим эти значения через пробел. И поступаем аналогично с hover-стилями:
Теперь .caption не просто вращается вокруг оси, но и словно появляется из глубины картинки.
Суть в том, что вращение не может быть само по себе, оно всегда происходит относительно какой-либо точки. Дефолтные координаты этой точки — центр, то есть 50% 50%, но сейчас мы сменим их, чтобы изменить траекторию движения нашего .caption. Задаются координаты свойством transform-origin. Кроме того, давайте добавим transition со значением параметра transition-timing-function — linear:
Сейчас эффект выглядит, как очень медленное вращение .caption вокруг оси Z относительно очень смещенной точки вращения. Чтобы усложнить эффект, изменим значение transition-timing-function на cubic-bezier(0.68, -0.55, 0.27, 1.55), что даст нам очень ускоренный выход в анимацию, замедленную середину и небольшой возврат назад в конце. Вот так будет выглядеть окончательный код:
Для этого элемента html-структура и стили для
И, чтобы произошло увеличение, на hover:
Таким образом, мы смещаем точку, от которой происходит переход, по горизонтали в крайнее левое положение, а по вертикали она так и остается в дефолтном положении — по центру. Прочие стили остаются аналогичными.
Точка смещена в крайнее верхнее положение, по горизонтали же — остается по центру. Прочие стили аналогичны.
html-структура остается базовой, равно как и стили для
Теперь .caption оказывается просто повернут вверх ногами. Пусть на hover он будет возвращаться в исходное положение:
Теперь, при наведении мыши, .caption просто прокручивается вокруг своей оси. Но, если мы изменим координаты точки, вокруг которой происходит переход, и, как в данном случае, перенесем ее наверх по вертикали таким образом:
Получится следующее: .caption сместится наверх, как если бы мы ему дали top: -100%; потому что сместилась точка, относительно которой он вращается.
html-структура понадобится такая:
Как видите, у нас добавилось два .overlay-слоя, тех самых, что будут выезжать сверху и снизу.
Что касается стилей: для
Теперь давайте рассмотрим стили для .overlay-контейнеров:
.overlay-top мы убрали вверх, .overlay-bottom — соответственно, вниз, теперь нам нужно, чтобы при наведении мыши они съезжались. Поскольку каждый из них имеет высоту, равную 50% высоты родителя, сделать это просто:
Теперь определим вид и поведение .caption, который у нас тоже спускается сверху, а значит, должен быть наверх помещен. Теперь, поскольку .caption появляется после .overlay, было бы логично, что у него будет проставлено значение параметра delay свойства transition:
- Наводим мышь на .effect
- Выезжают .overlay
- Появляется .caption
- Снимаем hover
- .overlay возвращаются на свои места
- .caption, благодаря выставленному значению delay, возвращается на место на 0.3s позже, что совсем не входило в наши планы
Мы можем задавать delay не только в стилях самого элемента, но и в стилях его поведения на hover, и в этом будет заключаться наш трюк. Как должны себя вести элементы на hover? Сначала выезжают .overlay и только потом .caption, это значит, что в состоянии hover у .overlay задержка равняется 0s, а у .caption — например, 0.3s
Но, когда мы снимаем hover, элементы возвращаются к своему обычному поведению, при котором сначала, без всякой задержки, на место возвращается .caption, а затем — .overlay, и, значит, у первого мы должны задержку отменить, а вторым — добавить:
Вот теперь очередность будет соблюдена, и элементы будут двигаться в правильном порядке.
Но, конечно, выезжать у нас будут не треугольники, а прямоугольники. Вот общие стили для обоих .overlay:
Вот что важно: ширина и высота прямоугольников должна индивидуально подгоняться под размер вашего контейнера с эффектом, равно как и координаты, на которые мы их поместим (и на которые потом передвинем). Что мы делаем: берем наши прямоугольники, разворачиваем на 33 градуса каждый, верхний смещаем к верхнему правому углу контейнера .effect, нижний — к нижнему левому соответственно, а на hover смещаем их до соприкосновения по линии диагонали прямоугольника контейнера .effect:
Прочие стили идентичны стилям предыдущих эффектов.
Изюминку этих эффектов составляет bounce-эффект, строящийся на значении параметра transition-timing-function свойства transition для .overlay.
В данном случае .overlay понадобится всего один. Вот такие понадобятся для него стили:
Ну а на hover увеличиваем его:
Чтобы .caption не отвлекал, все, что мы пропишем для него — это изменение прозрачности:
Прочие стили остаются дефолтными.
Что касается html-структуры, она такова:
Поскольку .overlay-1 и .overlay-2 вступают в разное время, transition им дадим каждому — свой:
Осталось рассмотреть стили .caption:
Чтобы добиться такого вида для .overlay, мы дадим ему постепенно увеличивающуюся box-shadow:
Изначальное положение для .caption будет: разворот на 180 градусов и opacity: 0. На hover разворачиваем .caption, который, в процессе поворота, становится непрозрачным:
Все остальные стили — дефолтные.
html-структура нужна такая:
Сначала построим “лесенку”. Каждый .overlay отличается от другого своим местоположением и значением параметра delay:
На hover их delay тоже будут различаться:
Самое интересное и сложное здесь — .caption. Вот базовые стили для него:
Теперь нам нужно задать ему положение до начала анимации. Во-первых, развернуть, ведь, когда мы наводим мышь, мы видим, как .caption проворачивается на некоторый угол. Зададим и transform-origin, определяющий точку, вокруг которой будет проходить трансформация. Добавим transform: rotate(-50deg); и transform-origin: 0% 100%;. Следующим шагом будет смещение по вертикали и по горизонтали, чтобы чуть позже обеспечить “выныривание”. Смещать будем с помощью transform: translate(x,y), который сдвигает элемент по оси X и Y соответственно. Наша задача — сдвинуть .caption почти в самый угол по горизонтали и примерно на две трети за пределы контейнера .effects по вертикали:
Теперь нам нужно совсем скрыть .caption до тех пор, пока на контейнер с эффектом не наведут мышь. В этот раз мы спрячем с помощью height: 0px; и overflow: hidden;. Конечные стили такие:
Теперь, чтобы проявить .caption на hover, восстановим его высоту, повернем до rotate(0deg) и вернем на место по горизонтали и вертикали:
html-структура нужна такая:
Начнем с левого верхнего .overlay, раскрывающегося полупрозрачной подложкой:
Интереснее с нижним правым. Поскольку ширина border равна 4px, просто задать ширине и высоте по 100% недостаточно, нужно компенсировать по 8px по вертикали и по горизонтали, чем нам и поможет calc:
Теперь перейдем к .caption и его содержимому. Для .caption стили остаются дефолтными, изменятся они для перемещаемых элементов
Осталось лишь, чтоб элементы опускались на hover, причем в установленном нами порядке:
html-структура нужна дефолтная, равно как и стили для
Ну а что касается .caption — задача в том, чтобы, развернув его на 30 градусов, совместить его правый нижний угол с правым нижним углом картинки и заставить исчезнуть с помощью понижения прозрачности. А его transition, состоит из двух частей:
Эффект почти такой же, как и у Apple Dock - иконка увеличивается в размерах при наведении. Реализуется только на CSS? поэтому плавности не будет, как если бы мы использовали jQuery.
Метод 1: CSS спрайты
Самый простой способ для реализации эффекта увеличения иконок. Нужно просто менять фоновые изображения.
Изображения под спрайты необходимо подготовить следующим образом
А вот этот CSS код вам нужен для применения к списку и установки фонового изображения к ссылкам.
При использовании CSS спрайтов очень важно правильно рассчитать размеры фоновых изображений. Для изменения фонового изображения будем использовать следующий CSS код:
Теперь перейдём к второму методу.
Метод 2: Наложение изображения
В этом способе у нас будет больше HTML кода и меньше CSS. Использовать мы будем два изображения для каждой ссылки.
В данном методе сделаем некоторые изменения. Эффект наведения будет таким, что Иконка будет располагаться поверх других. Разница между этим методом и предыдущим то, что мы должны установить высоту и ширину элементов, так как нам не нужно, чтобы список перемещался и изменял размеры при наведении мышки на Иконки. И вот он CSS код:
72px это размер уменьшенных изображений. Можно установить и больше, но слишком большой делать не стоит.
CSS для ссылок
Незабудьте установить относительное расположение изображений, так как мы будем использовать z-index для больших изображений, а z-index работает только при относительном или абсолютном позиционировании.
Когда курсор мыши над иконкой, мы используем margin: -28px, потому что, когда изображение увеличивается нам нужно совпадение центров уменьшенного и увеличенного изображений. Это очень важно для создания эффекта увеличения. Количество пикселей для margin вычисляется следующим образом:
- margin-top= – (высота большого – высота маленького)/2
- margin-left= – (ширина большого – ширина маленького)/2
И в заключении добавим в HTML фикс для правильного отображения списка в IE:
Вот и всё, можете выбирать любой метод. В первом будет меньше HTML и больше CSS кода, во втором наоборот.
Здесь не про дизайн. Здесь готовый код различных эффектов с подробными комментариями.
В дальнейшем эти эффекты можно будет применить к любой дизайнерской идее и создать оригинальную кнопку, которой нет больше ни у кого в интернете.
Нужно просто поиграть с цифрами в свойствах border-radius и box-shadow , поэкспериментировать со свойствами gradient и background
Все кнопки, показанные ниже, действующие. Выбирайте вариант, который вам понравится.
Варианты кнопок будут добавляться по мере создания.
Кнопка Многоцветная рамка Код
Кнопка 3D кнопка Код
Появление текста вращением Код
Появление текста из глубины Код
Кнопка Появление картинки Код
Кнопка с индикатором Код
Наведение и нажатие.
Появление вращающегося текста
Появление текста из глубины
Кнопка с индикатором
Не во всех кнопках свойство transform указано с необходимыми перфиксами, так что не забудьте их добавить, по примеру десятой кнопки.
Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами. Связано это с тем, что при реализации таких эффектов используется псевдокласс :hover, который определяет стиль элемента при наведении на него курсора мыши.
Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:
Как вставлять картинки на веб-страницу вы можете узнать из статьи как вставить изображение на web-страницу.
И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут class="animate1" , тогда html-код картинки будет выглядеть примерно так:
Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity , которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X) , так как они не поддерживают свойство opacity . Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.
Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами и html-файла нужно добавить следующий css-код:
На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover говорит браузеру, что для всех элементов , имеющих атрибут class равный animate1 при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками < и >. Если все сделали правильно, то должно получиться примерно так:
Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:
img.animate1 filter: alpha (Opacity=25);
opacity: 0.25;
>
img.animate1:hover filter: alpha (Opacity=100);
opacity: 1;
>
Результат будет такой:
Для большего эффекта можно замедлить изменения прозрачности картинки. Для этого можно воспользоваться свойством CSS transition , которое устанавливает эффект перехода между двумя состояниями элемента. Добавим для примера одну секунду замедления. Тогда наш CSS код станет таким:
img.animate1 filter: alpha (Opacity=25);
opacity: 0.25;
-moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */
-webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */
-o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */
transition: all 1s ease-in-out; /* эффект перехода для других браузеров */
>
img.animate1:hover filter: alpha (Opacity=100);
opacity: 1;
>
С помощью свойства transform изображение можно масштабировать, вращать, сдвигать, наклонять. Попробуем увеличить картинку. Тогда css-код будет таким:
img.animate1 — moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
>
img.animate1:hover — moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */
— webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */
— o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */
— ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */
transform: scale (1.5); /* эффект трансформации для других браузеров */
>
И результат будет таким:
К увеличению картинки можно добавить поворот. Тогда css стили немного изменяться:
img.animate1 — moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
>
img.animate1:hover — moz-transform: rotate (360deg) scale (1.5);
— webkit-transform: rotate (360deg) scale (1.5);
— o-transform: rotate (360deg) scale (1.5);
— ms-transform: rotate (360deg) scale (1.5);
transform: rotate (360deg) scale (1.5);
>
Выше мы рассмотрели случаи, когда в анимировании участвует одна картинка. Далее рассмотрим способы подмены одного изображения на другое. В этом случае обычно подготавливают два изображения одинакового размера: одно для исходного вида, другое для его подмены.
Допустим у нас есть две картинки, одна черно-белая другая цветная:
Сделаем так, чтобы при наведении курсора на черно-белое изображение отображалось цветное. Для этого исходную картинку сделаем фоном элемента div с помощью свойства background . А при наведнии на картинку курсора будем менять фоновую картинку с помощью все тех же псевдокласса hover и свойства background . Для реализации этого эффекта на html страницу добавляем элемент div с классом rotate1 :
И добавляем следующие описания стилей:
div.rotate1 background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
width: 480px; /* Ширина рисунка */
height: 360px; /* Высота рисунка */
>
div.rotate1:hover background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
>
Данный способ имеет один существенный недостаток. Так как второй рисунок загружается только при наведении курсора, то в случае если у пользователя медленный интернет, а размер файла с картинкой имеет большой размер, отображение картинки будет происходить с некоторой паузой. Поэтому ниже рассмотрим еще несколько способов подмены картинок при наведении курсора мыши.
Следующий способ будет основан на объединении двух картинок в один файл. Допустим нам нужно на страничку поместить кнопку, которая при наведении на нее курсора мыши меняла бы вид. Для этого два изображения объединяем в один файл и результирующая картинка будет выглядеть примерно так:
В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position . Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент a> . Тогда в html-страницу вставляем такой код:
А в css-файл такой:
a.rotate2 background: url (img/button.jpg); /* Путь к файлу с исходным рисунком */
display: block; /* Ссылка как блочный элемент */
width: 50px; /* Ширина рисунка в пикселах */
height: 30px; /* Высота рисунка */
>
a.rotate2:hover background-position: 0 -30px; /* Смещение фона */
>
И последний на сегодня способ, это когда одно изображение размещается под другим с помощью css правила position: absolute . В этом случае помещаем в контейнер div два изображения:
И добавим css-стилей:
.animate2 position:relative;
margin:0 auto;/* устанваливаем блок div по центру страницы*/
width:480px; /* Ширина */
height: 360px; /* Высота */
>
.animate2 img position:absolute; /* абсолютное позиционирование*/
left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
top: 0; /* выравниваем картинки по левому верхнему углу div-а */
>
После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:
Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition :
.animate2:hover img.second, .animate2 img.second:hover opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
>
А если добавить свойство transform :
.animate2:hover img.second, .animate2 img.second:hover opacity:0;
filter:alpha (opacity=0);
-moz-transform:scale (0, 1);
-webkit-transform:scale (0, 1);
-o-transform:scale (0, 1);
-ms-transform:scale (0, 1);
transform:scale (0, 1); /* уменьшаем ширину картинки до 0 */
>
Комбинируя различные CSS свойства можно добиться различных hover эффектов при смене картинок во время наведения курсора мыши. Эти и другие примеры я поместил на этой странице, там же можно скачать исходники. На этом все, до новых встреч.
Читайте также: