Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

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.

<!--[iflt IE 9]><script>
<script src="<a href="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>"></script>
    $(document).ready(function() {
           $('.onhover').hide();
$('li div').hover(function(){
$(this).find('.onhover').fadeIn(1000);
},function(){
$(this).find('.onhover').fadeOut(1000);
})
})
</script><![endif]-->

 

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

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

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




Комментарии

  1. radionzzz
    Thumb up Thumb down 0

    Шикарный эффект, обязательно поэкспериментирую!)

    Ответить

  2. Сергей
    Thumb up Thumb down +2

    Уже 3 дня сижу над одной штукой,

    сделать эффект получилось, но:

    нужно сделать так, что бы изображений было несколько, а подсвечивалось только то, на которое навёл мышку...

    так вот эффект срабатывает сразу для всех фото,

    ушёл от списка, каждую картинку в свой див поместил, так работает,

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

    помогите кто нибудь!! %)

    Ответить

    Elena Ответ:

    Thumb up Thumb down +1

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

    Ответить

    Сергей Ответ:

    Thumb up Thumb down +1

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

    Если кому интересно или такая же была проблема, могу кинуть отдельно код.

    Ответить

  3. Владимир
    Thumb up Thumb down +1

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

    Ответить

Оставить ответ


шесть − 6 =

Вставить изображение