Потрясающий эффект при наведении на изображение

20 апреля 2012 | Опубликовано в css | 5 Комментариев »

В этом уроке мы будем учиться делать интересный эффект при наведении на изображение. Мы создадим его при помощи css3, а также добавим JQuery для браузеров, которые не поддерживают прозрачность и cвойство transition. Также мы позаботимся о том, чтобы наши изображения были адаптивными.

Нажмите на изображение, чтобы увидеть демо-версию:

Шаг 1 : Photoshop

Нам нужны 2 версии картинок : изображение, которое мы хотим видеть при наведении и его чёрно-белая копия. Наши картинки размером 845px x 515px.

Шаг 2 : Разметка html

..

<divid="wrap">

<ul>

   <li>

      <div>

          <imgsrc="img/tut1_desaturated.jpg"/>

          <spanclass="shadow"></span>

          <imgclass="onhover"src="img/tut1_color.jpg"/>

      </div>

   </li>

</ul>

</div>

Шаг 3: Добавляем стили

Давайте сначала сбросим ненужные стили, для этого добавим следующий код:

html, body, div, span, h1, h2, p, a, ul, li, img

{margin:0;padding:0;

border:0;outline:0;

font-size:100%;background:transparent;}

ul {list-style:none;}

Основной контейнер под названием #wrapвыровнен по центру и имеет размер 865 px = 845px (размер изображения) + 2x10px (обводка).
Диву, в который поместим изображение, назначим свойство position:relative (чтобы правильно расположить 2 варианта изображения) и overflow: hidden (чтобы скрыть ненужные части, когда мы будем вращать и увеличивать изображение).

#wrap {width:865px;margin:0auto;}

ul {margin-top:50px; }

li div {width:845px;height:515px;overflow:hidden;position:relative;

border:10pxsolidwhite; box-shadow:02px5pxrgba(0,0,0,.4);}

Шаг4: Анимация от чёрно-белого к цветному

Основное изображения имеет относительное позиционирование; значение прозрачности для .onhover(цветное изображение при наведении) -0 и установлено абсолютное позиционирование. При наведении на общий див для .onhoverпрозрачность изменяется на 1. Чтобы сделать эффект плавным, добавим свойство transition к изображению. (В примере не указаны префиксы для браузеров).

img {position:relative;top:0;left:0;

transition:all1.5s .5s; }

img.onhover {opacity:0;position:absolute;}

li div:hover img.onhover {opacity:1;}

Чтобы углубить эффект перехода между нормальным состоянием изображения и состоянием при наведении, мы добавим угасающую внутреннюю тень (span.shadow):

.shadow {position:absolute;top:0;left:0; opacity:1;background:transparent;

width:100%;height:100%;

box-shadow:inset0060px20pxrgba(37,27,23,.5);

transition:opacity1.5s .5s;}

li div:hover .shadow {opacity:0;}

Шаг 5: Давайте добавим масштабирование и вращение

Нам нужно просто добавить свойство transform, укажите время, а также параметры при наведении.

img {position:relative;top:0;left:0;

transition:all1.5s .5s;

transform: rotate(-4deg) scale(1.2);

transform-origin:50%50%;}

li div:hover img {transform: scale(1) rotate(0);}

Шаг 6: Делаем изображение адаптивным

Во-первых, давайте немного изменим стили для #wrap, элементов списка (li div),чтобы сделать их резиновыми. В последнем случае мы просто не указываем высоту и ширину элемента.

#wrap {max-width:865px;margin:0auto;width:95%;}

li div {overflow:hidden;position:relative;

border:10pxsolidwhite; box-shadow:02px5pxrgba(0,0,0,.4);}

Мы также должны изменим стиль элемента IMG — добавим ему три новых свойства.

img {max-width:auto;vertical-align:bottom;width:100%;}

Шаг 7: Добавим jQuery

Добавим JQuerry, чтобы наши изображения корректно отображались в IE.

Это все. Надеюсь, вы вдохновились этим пример -теперь ваша очередь играть со свойством css transitions.

Автор урока — pehaa

Перевод — Дежурка

Опубликовано в css, апреля 20, 2012
Метки: css, css3, урок css3

�

radionzzz
3 мая 2012 в 8:48
0

Шикарный эффект, обязательно поэкспериментирую!)
Сергей
3 октября 2012 в 15:14
+2

Уже 3 дня сижу над одной штукой,
сделать эффект получилось, но:
нужно сделать так, что бы изображений было несколько, а подсвечивалось только то, на которое навёл мышку...
так вот эффект срабатывает сразу для всех фото,
ушёл от списка, каждую картинку в свой див поместил, так работает,
но если поместить эти дивы с фото (или список с фотографиями — проверил) в свой див (для задания позиции на экране) то эффект срабатывает сразу для всех фото всё равно, и в некоторых случаях срабатывает сразу при наведении на общий див, даже не на фото..
помогите кто нибудь!! %)

Elena Ответ:
октября 4, 2012 at 2:24 пп

+1

А Вы можете код показать?

Сергей Ответ:
октября 9, 2012 at 9:50 дп

+1

Проблему решил, сделал через список, каждая колонка, в которой текст и рисунок теперь подсвечиваются отдельно при наведении.
Если кому интересно или такая же была проблема, могу кинуть отдельно код.
Владимир
4 октября 2012 в 21:38
+1

Привет. Сразу скажу я только учусь. Может кто объяснить как задается видимая область картинки. Вот в примере сама картинка больше размером и наклонена, но мы видим только прямоугольный кусок от нее. Это делается простыми средствами html+css или же это дело рук jquery? спасибо.