Меняется картинка при наведении css: Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?


30.10.1977 Facebook Twitter LinkedIn Google+ Разное


Содержание

Как менять картинку при наведении курсора мыши

Вы здесь: Главная — CSS — CSS Основы — Как менять картинку при наведении курсора мыши

Я думаю, что Вы часто встречали на различных сайтах, когда Вы наводили мышкой на какую-нибудь картинку, и она менялась. Самый простой пример — это наведение курсора мыши на кнопку. Допустим, после этого она меняла цвет, как бы делаясь активной. Вот о том, как менять картинку при наведении курсора мыши, Вы узнаете из этой статьи.

Многие, конечно, будут делать это на JavaScript, хотя это совершенно неразумно. Такие вещи делаются с помощью CSS и псевдоэлемента hover. Давайте с Вами поставим задачу.

У нас есть картинка. Мы хотим, чтобы при наведении на неё курсора мыши, она изменялась. Более того, мы хотим, чтобы ещё появлялась красная рамка вокруг картинки.

HTML-код очень простой:

<div></div>

Теперь CSS-код:

. img {
  background: url("image_1.jpg") no-repeat; // Подставляем картинку по умолчанию
  height: 100px; // Высота картинки
  width: 100px; // Ширина картинки
}
.img:hover {
  background: url("image_2.jpg") no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши
  border: 2px solid #f00; // Устанавливаем красную рамку
  height: 120px; // Высота новой картинки
  width: 120px; // Ширина новой картинки
}

Ключевой ошибкой новичков является отсутствие свойств width и height. Без них пустой блок div просто не отобразится, поэтому не забывайте о том, что нужно указывать напрямую ширину и высоту, и они должны совпадать с шириной и высотой изображения, которое Вы подтсавляете в блок.

Данный способ является классическим, который постоянно используется для

создания динамических эффектов без использования JavaScript, думаю, что Вы будете его использовать ещё не раз.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

  • Создано 04.06.2012 12:53:28
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov. ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Смена изображения при наведении на CSS без Javascript

CSS3

При создании сайтов мы сталкиваемся с различными задачами, которые могут быть решены различными способами. Сегодня о том, как просто, с использованием только CSS изменить изображение при наведении на него курсора.Давайте сформулируем нашу задачу. Итак, есть блок, внутри которого два изображения (одно наложено на другое посредством задания абсолютного позиционирования). Наша задача — при наведении мыши сделать так, чтоб на месте верхнего изображения появилось то, которое под ним.

Но самый смак в том, что смена будет происходить плавно, а не мгновенно. Прямо как с использованием Javascript Итак, приступаем.

Для начала подготовим два изображения одинакового размера. К примеру, таких:

HTML5

CSS3

 

 

 

 

 

Подготовим html разметку:


<div>
<img src="html5.jpg" />
<img src="css3.jpg" />
</div>

Здесь все просто — у нас есть контейнер, в котором находятся две картинки — html5.jpg с классом bottom и css3.jpg с классом top.

Теперь займемся самым главным — css. Он может быть таким:


#img_container {
position:relative;
height:400px;
width:400px;
margin:0 auto;
cursor:pointer;
}

#img_container img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

#img_container img. top:hover {
opacity:0;
}

Тут все довольно просто — картинка с логотипом css лежит поверх картинки с лого html5. При наведении курсора мыши на верхнюю картинку мы меняем ее прозрачность до нуля, т. е делаем ее полностью прозрачной, что приводит к тому, что «проявляется» картинка, лежащая под ней. Лучше один раз увидеть — смотрим демо

Смена изображения при наведении на CSS без Javascript

 

Меток нет. Похожие записи Запись опубликована в рубрике CSS и все, что связано со стилями. Добавьте в закладки постоянную ссылку.

Как заменить изображение при наведении на него курсора? CSS

Многие из Вас ещё, независимо от знаний вёрстки и программирования, сталкивались с
заменой изображения при наведении на него. Самый частый пример — наведение курсора мыши на кнопку. В результате картинка менялась, возможно даже в размерах и форме. В данной статье я покажу как можно заменить изображение, изменить его размер при наведении на него, используя только CSS.
На будущее, рекомендую использовать именно такой метод, так как пользуясь средствами JS Вы рискуете попасть на пользователя, у которого он отключен в настройках браузера, в результате чего человек может не увидеть каких-либо деталей или не понять смысла задумки.

Что будем использовать? Нам достаточно псевдоэлемента hover и свойства background. Из файлов это сам html файл и изображение.

В реализации всё просто. Код состоит из двух частей:

1. html с нужным div

Код HTML

<div class="img"></div>

2. свойства css для div

Код CSS

.img {
  background: url("image001.jpg") no-repeat; /* изображение по умолчанию */
  height: 120px; /* высота изображения */
  width: 120px; /* ширина изображения */
}
.img:hover {
  background: url("image002.jpg") no-repeat; /* новое изображение */
  border: 2px solid #f00; // Устанавливаем красную рамку
  height: 120px; /* высота изображения */
  width: 120px; /* ширина изображения */
}

Теперь предлагаю рассмотреть занимательный и простой пример работы кода. При желании можно скачать и разобрать принцип работы у себя на компьютере.Демонстрация Скачать исходники
Как вы видите на примере, изображение, указанное по умолчанию (то есть image001), появляется при загрузке страницы, а image002 только при наведении курсора на первое изображение.
Внимание! Нужно обязательно указывать ширину и высоту блока, в противном случае div просто не отобразится. Также будьте внимательны с указанием точных размеров блока, так как изображение внутри не будет масштабировано, так как оно считается фоновым. Если размеры блока будут меньше, то и видна будет только часть изображения.

Чаще всего используется именно такой способ смены изображения. Если хотите заменить изображение в других случаях, например, при клике, то использовать надо уже не hover, а active.

Да, существуют и другие способы заменить изображение: JS, библиотека jQuery, CSS3, но о них я напишу в статьях в соответствующих разделах.

Спасибо за внимание!

Смена изображения при клике по ссылке

124

453

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

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


Для получения такого эффекта «смены» изображения предлагаем Вам воспользоваться вот таким, совсем маленьким скриптом, который необходимо будет поместить в начало Вашей странички:

JavaScript код:

<script type="text/javascript">
function l_image (a) {
    document.example_img.src = a;
}
</script>

В том месте Вашей странички, где Вы будете выводить ссылки и изображение, которое будет меняться на другое при клике по этим ссылкам, вставьте этот код:

HTML код:

<table style="width: 100%;">
<tr style="text-align: center; vertical-align: center;">
 <td style="width: 50%;">
  <a href="javascript:l_image('image/img_1.png')">Ссылка на изображение № 1</a><br>
  <a href="javascript:l_image('image/img_2.png')">Ссылка на изображение № 2</a><br>
  <a href="javascript:l_image('image/img_3. png')">Ссылка на изображение № 3</a><br>
  <a href="javascript:l_image('image/img_4.png')">Ссылка на изображение № 4</a><br>
 </td>
 <td style="width: 50%;">
  <img src="image/img_1.png" name="example_img"
  alt="Картинки для демонстрации работы скрипта смены изображений">
 </td>
</tr>
</table>

Данный пример поможет Вам избежать переизбытка изображений на одной страничке сайта и улучшит общую читабельность.

Дата создания: 14:24:56 03.07.2011 г.

Дата обновления: 22:36:47 08.03.2012 г.

Посещений: 60692 раз(а).


Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Изменение HTML-изображений при наведении — быстрый CSS-трюк

Изменение изображения при наведении в CSS — это часть торт. Это распространенный метод, который используется в течение длительного времени и за прошедшие годы получил ряд улучшений (например, CSS-спрайты). Изменить html-изображение при наведении немного сложнее, и когда я столкнулся с эта самая проблема неделю назад или около того поставила меня в тупик около 30 секунды. Более чем достаточно, чтобы посвятить статью подборке решения, чтобы освежить память людей.

Чего мы хотим добиться

Наведение курсора на html-изображениях не слишком распространено, так как большинство изображений в html чисто содержательные изображения и не имеют отношения к реальному дизайну. Один важным исключением является логотип сайта, который лучше всего размещать в html вместо css. Обычной практикой является размещение домашней ссылки на сайте. логотип и при наведении приятно видеть индикацию состояния наведения, тонко, как это может быть. Подводя итог, что именно мы хотим сделать:

  • Поместите изображение в исходный код html
  • Измените внешний вид изображения при наведении курсора
  • Держитесь подальше от любого javascript и решите проблему, используя только css страница.

Последнее условие является причиной того, что мы не можем полагаться только на изображения css, и хотя спрайты можно использовать, мы должны убедиться, что только основа изображение появляется на печати.

Первое решение: спрайты

 a {display:block; ширина: 100 пикселей; высота: 50 пикселей; overflow:hidden;} 
a:hover img {margin-left:-100px;} /* ie6 нуждается в исправлении*/
a:hover {zoom:1;}

Наше первое решение использует спрайты. Это означает, что обе версии образа создаются в одном и том же файл.В данном случае изображение имеет ширину 100 пикселей, поэтому состояние наведения изображение размещается на 100 пикселей правее основного изображения. Мы даем ссылку размеры изображения и добавить overflow:hidden чтобы скрыть состояние наведения. При наведении мы просто подтягиваем изображение к влево и вверх приходит состояние наведения. IE6 не очень кооперативный и нужно немного исправить, простой Zoom:1 делает свое дело.

Довольно простой трюк, который хорошо проявляется и на печати (как применяется overflow: hidden), только при полном отключении css этот метод не работает, так как оба состояния изображения будут отображаться следующим друг другу.Кроме того, техника имеет хорошую поддержку браузеров. только IE6 немного раздражает (что еще нового).

посмотрите пример на демо-странице

Второе решение: отдельные изображения

 a {display:block; ширина: 100 пикселей; высота: 50 пикселей; background:url("logo-2.gif") left top no-repeat;} 
a:hover img {position:absolute; слева:-999em; top:-999em;} /* ie6 нуждается в исправлении*/
a:hover {zoom:1;}

Второе решение немного грязнее, но хорошо отображается даже с отключенным css.Идея состоит в том, чтобы сделать отдельный изображение для состояния наведения и разместить его за фактическим изображением в css. Когда ссылка наведена, мы просто отодвигаем базовое изображение и что остается, так это состояние наведения изображения, определенное в css. А простой трюк, но эффективный, без задержек, так как изображение css определяется на ссылку и загружается при первом отображении страницы. Опять же, IE6 нужно немного подтолкнуть, чтобы заставить его работать, добавив простой масштаб :1 — это все, что нужно.

Помимо небольшой настройки IE6, это довольно удобное решение, хотя это требует загрузки двух отдельных изображений. Если вы стремитесь к скорость, возможно, это не ваш выбор.

посмотрите пример на демо-странице

Третья альтернатива: прозрачные изображения

 a {display:block; ширина: 100 пикселей; высота: 50 пикселей; фон:#fff; переполнение: скрыто;} 
a: hover {граница: 0px сплошная красная; background:#00FF21;}

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

Очень эффективный метод, хотя его трудно реализовать с масками png, т.к. ie6 плохо поддерживает png. Кроме того, также ограничено в действии, поскольку можно использовать только для изменения цвета вашего логотипа.

посмотрите пример на демо-странице

Последний вариант: прозрачность CSS

В завершение статьи финальная вариация на цветовую тему. описано в третьем варианте. Вместо использования прозрачного html изображение также можно использовать css прозрачность, чтобы получить красивый эффект подсветки. Здесь вы также можете делать простые блики, используя цвета фона или попробуйте более сложные маски с использованием изображений. Более информацию об этой технике можно найти в блоге SocialGeek.

Округление

Возможно (читай: возможно) я пропустил некоторые решения, но это были те самые что сразу пришло в голову. У всех есть свои плюсы и минусы, но между тремя из них у вас должно быть более чем достаточно вариантов для выполнить то, что вы хотите. Ничего сложного и сложного, но дает вашему сайту немного больше.

Добавление крутых эффектов при наведении курсора на изображения вашего веб-сайта

Платформа Wix полна удивительных дизайнерских возможностей, и хотя некоторые из них очевидны, некоторые (например, эффект наведения) требуют немного больше усилий , чтобы их найти.Вот почему мы здесь, чтобы привлечь внимание к этим удивительным функциям, которые, возможно, остались незамеченными. Это отличный способ сделать ваш сайт более креативным и один из наших любимых элементов дизайна. В Wix Tricks на этой неделе мы расскажем о классном эффекте наведения изображения, о том, как его добавить и почему вы можете использовать его при создании веб-сайта.

Так зачем же использовать эту функцию? Добавление эффектов наведения к вашим изображениям может действительно повысить интерактивность вашего сайта, заставляя людей хотеть наводить курсор на все ваши изображения, кнопки и многое другое, на случай, если это вознаградит их реакцией. Если сделать ваш сайт интерактивным, как правило, люди будут оставаться на нем в течение более длительного периода времени, и чем дольше люди остаются на нем, тем больше вероятность того, что они продолжат изучение вашего сайта, подпишутся или даже совершат покупку. Это также отличный способ оптимизировать традиционный фон веб-сайта. Итак, теперь, когда вы знаете, почему эта функция — колени пчелы, давайте приступим к делу [зависания].

Пример в Awesome: www.naomikizhner.com

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

Как реализовать это на собственном сайте:

Время заняться техническими вопросами! Вот пошаговая инструкция: В редакторе щелкните значок «Добавить» > «Кнопки и меню» > «Кнопка изображения»:

Дважды щелкните кнопку изображения, чтобы вызвать настройки:

. Выберите изображение для просмотра по умолчанию и изображение для просмотра при наведении курсора.Думайте об этом как о «до» и «после» вашего эффекта наведения:

Вот как это будет выглядеть при наведении курсора на изображение:

И… не забудьте! Поскольку это кнопка, она должна куда-то ссылаться. Люди, скорее всего, будут готовы щелкнуть мышью после того, как наведут курсор мыши, поэтому дайте им хорошее место для перехода. Страница продукта, кто-нибудь?

Полезный совет:  Хорошо подготовить изображения заранее. Чтобы воплотить это волшебство при наведении курсора, вам понадобятся две версии изображения.Классический выбор — одна черно-белая версия и одна цветная. Вы также можете использовать изображения Wix для размещения на своем сайте.

С этой функцией можно делать еще больше забавных вещей:

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

Используйте всплывающий текст, который отображается при наведении указателя мыши, для еще одного отличного способа взаимодействия с посетителями вашего сайта:

Используйте изображение, которое слегка (или сильно) перемещается или изменяется при наведении на него указателя мыши:

Переключение между модными векторные изображения:

Возможности безграничны, так что парите!

Разработано командой Wix

HTML CSS Эффекты при наведении на изображение

/** код от webdevtrick (https://webdevtrick.com) **/

* {

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

      -ms-box-sizing: border-box;

          box-sizing: border-box;

}

тело {

  фон: #333;

}

.imagex {

  граница: 10px сплошная #fff;

  с плавающей запятой: слева;

  высота: 300 пикселей;

  ширина: 300 пикселей;

  поле: 20 пикселей;

  переполнение: скрыто;

  

  -webkit-box-shadow: 5px 5px 5px #111;

          box-shadow: 5px 5px 5px #111;

}

 

. рост img {

  высота: 300 пикселей;

  ширина: 300 пикселей;

 

  -webkit-transition: все 1s легкость;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

 

.grow img:hover {

  ширина: 400 пикселей;

  высота: 400 пикселей;

}

 

.grow img {

  высота: 300 пикселей;

  ширина: 300 пикселей;

  -webkit-transition: все 1s легко;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

.вырастить изображение: наведите курсор {

  ширина: 400 пикселей;

  высота: 400 пикселей;

}

 

.shrink img {

  высота: 400 пикселей;

  ширина: 400 пикселей;

  -webkit-transition: все 1s легко;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

. shrink img:hover {

  ширина: 300 пикселей;

  высота: 300 пикселей;

}

 

.уменьшить изображение {

  высота: 400 пикселей;

  ширина: 400 пикселей;

  -webkit-transition: все 1s легко;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

.shrink img:hover {

  ширина: 300 пикселей;

  высота: 300 пикселей;

}

 

.sidepan img {

  margin-left: 0px;

  -webkit-transition: маржа 1s легкость;

     -moz-transition: маржа 1s легкость;

       -o-transition: маржа 1s легкость;

      -ms-transition: маржа 1 с легкость;

          переход: маржа 1 с легкость;

}

 

.боковая панель img:hover {

  margin-left: -200px;

}

 

. vertpan img {

  margin-top: 0px;

  -webkit-transition: маржа 1s легкость;

     -moz-transition: маржа 1s легкость;

       -o-transition: маржа 1s легкость;

      -ms-transition: маржа 1 с легкость;

          переход: маржа 1 с легкость;

}

.vertpan img:hover {

  margin-top: -200px;

}

 

.наклон {

  -webkit-transition: все 0,5 с легкости;

     -moz-transition: все 0,5 с легкости;

       -o-transition: все 0,5 с легкости;

      -ms-transition: все 0,5 с облегчения;

          переход: все 0,5 с облегчения;

}

.tilt:hover {

  -webkit-transform: rotate(-10deg);

     -moz-transform: rotate(-10deg);

       -o-transform: rotate(-10deg);

      -ms-transform: rotate(-10deg);

          transform: rotate(-10deg);

}

 

.morph {

  -webkit-transition: все 0,5 с легкости;

     -moz-transition: все 0,5 с легкости;

       -o-transition: все 0,5 с легкости;

      -ms-transition: все 0,5 с облегчения;

          переход: все 0,5 с облегчения;

}

. morph:hover {

  border-radius: 50%;

  -webkit-transform: rotate(360deg);

     -moz-transform: rotate(360deg);

       -o-transform: rotate(360deg);

      -ms-transform: rotate(360deg);

          преобразование: поворот (360 градусов);

}

 

.focus {

  -webkit-transition: все 1s легко;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

.focus:hover {

  граница: 70px сплошная #FCD925;

  border-radius: 50 %;

}

 

.bw {

  -webkit-transition: все 1s легкость;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

 

. bw:hover {

  -webkit-filter: оттенки серого (100%);

}

 

.blur img {

  -webkit-transition: все 1s легкость;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

 

.blur img:hover {

  -webkit-filter: blur(5px);

}

10 простых эффектов при наведении на изображение, которые можно скопировать и вставить

Эффекты наведения всегда интересная тема для изучения.В прошлом мы создали несколько замечательных примеров наведения CSS, которые было легко скопировать и вставить прямо в ваш код.

Сегодня мы добавим десять новых эффектов, специально созданных для работы с изображениями. Каждый пример поставляется с фрагментом HTML и CSS, который вы можете украсть, а также с демо-версией, чтобы вы могли увидеть его в действии.

Краткий обзор

Прежде чем мы начнем, взгляните на демо ниже, чтобы увидеть все различные эффекты наведения, которые мы будем создавать.

Демонстрация: Щелкните здесь для запуска.

Настройка

Перед тем, как мы начнем создавать отдельные демо, необходимо выполнить базовую настройку. Вот кусок CSS, который мы будем использовать, чтобы задать основной внешний вид всех примеров.

1

2

2

3

4

5

6

7

8

70002

8

9

10

11

12

13

12

14

13

14

15

16

17

18

19

20

21

22

* {

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

      -ms-box-sizing: border-box;

          box-sizing: border-box;

}

 

body {

  background: #333;

}

 

.pic {

  граница: 10px сплошная #fff;

  с плавающей запятой: слева;

  высота: 300 пикселей;

  ширина: 300 пикселей;

  поле: 20 пикселей;

  переполнение: скрыто;

  

  -webkit-box-shadow: 5px 5px 5px #111;

          box-shadow: 5px 5px 5px #111;

}

По большей части это базовые вещи: box-sizing позволяет нам манипулировать блочной моделью (не стесняйтесь применять более конкретно, если вам не нравится универсальный селектор), а класс pic дает нам возможность добавить некоторые общие стили. для каждой фотографии.

Масштаб и панорамирование

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

Вот демонстрация четырех эффектов наведения в действии:
Демонстрация: Нажмите здесь, чтобы запустить.

Расти

Для начала сделаем так, чтобы при наведении курсора на изображение фотография увеличивалась, оставаясь при этом в пределах своих границ, что приводило к эффекту масштабирования.Вот HTML.

HTML

  portrait

Как видите, мы используем класс «pic» из предыдущего вместе с классом «grow». Как обычно, наши изображения предоставлены Lorem Pixel. Обратите внимание, что изображение, которое мы здесь используем, имеет размер 400 на 400 пикселей. Теперь давайте посмотрим на CSS.

КСС

/*РОСТ*/

.рост img {

  высота: 300 пикселей;

  ширина: 300 пикселей;

 

  -webkit-transition: все 1s легкость;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

 

.grow img:hover {

  ширина: 400 пикселей;

  высота: 400 пикселей;

}

Здесь мы специально нацелились на тег изображения, установили его высоту на квадрат 300 пикселей, а затем увеличили его до квадрата 400 пикселей при наведении курсора мыши.Опять же, поскольку у нас есть переполнение , установленное на скрытое , это приведет к эффекту масштабирования.

Термоусадка

Мы видели, как увеличить изображение при наведении, поэтому давайте изменим этот эффект и уменьшим масштаб фотографии. Метод почти такой же, только на этот раз вы начнете с размера 400 пикселей и уменьшите его до 300 пикселей при наведении.

HTML

  city

КСС

/*SHRINK*/

.shrink img {

  высота: 400 пикселей;

  ширина: 400 пикселей;

 

  -webkit-transition: все 1s легкость;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

 

.уменьшить изображение: hover {

  ширина: 300 пикселей;

  высота: 300 пикселей;

}

Боковой поддон

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

HTML

  kick

Здесь мы используем изображение шириной 600 пикселей, но высотой всего 300 пикселей.Поскольку мы масштабируем вбок, нам не нужна дополнительная высота, чтобы добиться эффекта.

КСС

/*SIDEPAN*/

.sidepan img {

  margin-left: 0px;

  -webkit-transition: маржа 1s легкость;

     -moz-transition: маржа 1s легкость;

       -o-transition: маржа 1s легкость;

      -ms-transition: маржа 1 с легкость;

          переход: маржа 1 с легкость;

}

 

.боковая панель img:hover {

  margin-left: -200px;

}

Для панорамы мы не меняем размер изображения, как в прошлый раз, а вместо этого используем поле, чтобы вытянуть изображение, оставленное при наведении. Если вы хотите, чтобы он двигался вправо, используйте положительное значение или margin-right .

Вертикальный лоток

Вертикальная сковорода тоже может быть прохладной. Еще раз, я буду использовать этот эффект, чтобы передать ощущение движения, но он также отлично подходит для передачи высоты, если вы хотите панорамировать что-то вроде высокого здания.Утес на нашей фотографии помогает продвигать эту концепцию.

HTML

  climb

В прошлый раз, когда мы использовали изображение размером 600 на 300 пикселей, на этот раз мы перевернем его и возьмем фотографию размером 300 на 600 пикселей.

КСС

/*ВЕРТПАН*/

.vertpan img {

  margin-top: 0px;

  -webkit-transition: маржа 1s легкость;

     -moz-transition: маржа 1s легкость;

       -o-transition: маржа 1s легкость;

      -ms-transition: маржа 1 с легкость;

          переход: маржа 1 с легкость;

}

 

. vertpan img:hover {

  margin-top: -200px;

}

То же сверло, что и в прошлый раз, только мы используем margin-top вместо margin-left .Это приведет к тому, что верхняя часть изображения будет видна по умолчанию, а нижняя часть изображения появится в поле зрения при наведении курсора.

Развлечение с трансформерами

Наш следующий раздел эффектов немного более сумасшедший. Мы начнем с простого наклона, а затем перейдем к действительно уникальным и интересным зависаниям.

Вот демонстрация трех эффектов в действии:
Демонстрация: Нажмите здесь, чтобы запустить.

Наклон

Это очень просто, все, что мы собираемся сделать, это немного повернуть изображение, когда пользователь наводит на него курсор.В результате получается простая, но забавная иллюзия криво висящей картины.

HTML

  

/*TILT*/

.tilt {

  -webkit-transition: все 0,5 с облегчения;

     -moz-transition: все 0.5s легкость;

       -o-transition: все 0,5 с легкости;

      -ms-transition: все 0,5 с облегчения;

          переход: все 0,5 с облегчения;

}

 

.tilt:hover {

  -webkit-transform: rotate(-10deg);

     -moz-transform: rotate(-10deg);

       -o-transform: rotate(-10deg);

      -ms-transform: rotate(-10deg);

          transform: rotate(-10deg);

}

Как видите, все, что нам нужно было сделать, это повернуть изображение на десять градусов.Легко и эффективно! Обратите внимание, что на этот раз мы нацелены на сам класс, а не на изображение.

Морф

Вот тут-то и начинается сумасшествие. Изображение выше не совсем точно отражает это, так что обязательно посмотрите демоверсию. Происходит следующее: когда пользователь наводит курсор, изображение начинает вращаться. При вращении он превращается из квадрата в круг. В результате очень весело играть.

HTML

  beach

КСС

1

2

2

3

4

5

6

7

8

70002

8

9

10

11

12

13

12

14

13

14

15

16

17

/*MORPH*/

.morph {

  -webkit-transition: все 0.5s легкость;

     -moz-transition: все 0,5 с легкости;

       -o-transition: все 0,5 с легкости;

      -ms-transition: все 0,5 с облегчения;

          переход: все 0,5 с облегчения;

}

 

. morph:hover {

  border-radius: 50%;

  -webkit-transform: rotate(360deg);

     -moz-transform: rotate(360deg);

       -o-transform: rotate(360deg);

      -ms-transform: rotate(360deg);

          преобразование: поворот (360 градусов);

}

Здесь я установил класс морфинга, чтобы он вращался на 360 градусов при наведении.По мере вращения радиус границы будет постепенно увеличиваться до 50%, в результате чего получится круг.

Фокус

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

HTML

    cricket

  

КСС

/*FOCUS*/

. focus {

  -webkit-transition: все 1s легко;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

 

.focus:hover {

  граница: 70px сплошная #000;

  border-radius: 50 %;

}

Здесь я взял нашу белую рамку шириной 10 пикселей и превратил ее в черную рамку шириной 70 пикселей, увеличив радиус до 50%, как мы сделали в последнем примере.

Веб-фильтры

Этот последний набор эффектов чисто экспериментальный. В отличие от приведенных выше примеров, все из которых используют несколько префиксов для обеспечения максимальной совместимости с браузерами, в них используется только префикс -webkit, потому что на данный момент другой поддержки нет. Если вы не используете Safari или Chrome, они вам не подойдут.

Несмотря на досадные ограничения, фильтры Webkit позволяют создавать довольно крутые эффекты! Вот демонстрация трех моих любимых:

.

Демонстрация: Щелкните здесь для запуска.

Размытие

Первый эффект, который мы собираемся создать, — это простое размытие. Долгое время человек стремился размыть пиксели только с помощью CSS, и теперь это наконец возможно с помощью одной маленькой строки кода!

HTML

  plane

КСС

/*РАЗМЫВАНИЕ*/

.blur img {

  -webkit-transition: все 1s легкость;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

 

.blur img:hover {

  -webkit-filter: blur(5px);

}

Как видите, мы используем свойство -webkit-filter , затем устанавливаем размытие на 5 пикселей. Вот и все.

Ч/Б

На этот раз мы удалим всю насыщенность изображения при наведении. Раньше для создания этого эффекта требовалось два изображения, но с фильтрами Webkit мы можем сократить его до одного.

HTML

  sea

КСС

/*Ч/Б*/

.bw {

  -webkit-transition: все 1s легко;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

 

.bw:hover {

  -webkit-filter: оттенки серого (100%);

}

Здесь я установил значение оттенков серого на 100%. Если вы хотите уменьшить только часть насыщенности, попробуйте уменьшить это число.

Сделать ярче

В качестве последнего трюка мы затемним фотографию по умолчанию, а затем осветлим ее до нормального состояния при наведении. Это создает своего рода эффект раскрытия.

  sea

/*DARKEN*/

.brighten img {

  -webkit-filter: яркость (-65%);

  -webkit-transition: все 1s легко;

     -moz-transition: все единицы облегчаются;

       -o-transition: все 1 с облегчением;

      -ms-transition: все 1 с облегчением;

          переход: все 1 с облегчением;

}

 

.ярче img: hover {

  -webkit-filter: яркость (0%);

}

Здесь 0% — это обычная яркость.

Comments