Реализуем hover-эффект над картинкой с помощью css3

Крутящийся элемент

Хорошо подходит для маленьких элементов типа закрывающего крестика или стрелочки. На текстовые ссылки такое, конечно, вешать не надо.

Пример:

Х

Разметка здесь очень простая:

1
<div class="my-el">Х</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.my-el {
   border 1px solid rebeccapurple;
   cursor pointer;
   background rgb(219, 199, 199);
   width 17px;
   height 17px;
   text-aligncenter;
   font-size 14px;
   font-family Arial;
   font-weight bold;
   opacity 0.6;
   z-index 100;
   cursor pointer;
  -moz-transform rotate(0deg);
  -webkit-transform rotate(0deg);
  -o-transform rotate(0deg);
  -ms-transform rotate(0deg);
  transform rotate(0deg);
  -webkit-transition all 600ms;
  -moz-transition all 600ms;
  -o-transition all 600ms;
  transition all 600ms;
}
.my-el:hover {
  opacity 1;
  -moz-transform rotate(180deg);
  -webkit-transform rotate(180deg);
  -o-transform rotate(180deg);
  -ms-transform rotate(180deg);
  transform rotate(180deg));
}

Непосредственно за кручение отвечает свойство transform, все остальное — украшательства (еще в этом примере плавно меняется значение прозрачности opacity).

Мышка пришла на тег и ушла с него

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

Это не обязательный принцип. Можно и нужно использовать всю мощь правил CSS, в частности, transition, opacity, background-color, background-image… Особенно интересны первые два — они сами по себе динамичны.

Еще более интересна возможность использовать динамику при уходе мышки с тега. Почему нет? В статическом состоянии страницы ничто не динамично, но если приход мышки на тег — это hover, то уход с него вполне может быть живым. Тот факт, что классу не назначен псевдокласс, ровным счетом ничего не означает.

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

Совершенно не обязательно, чтобы hover CSS-эффекты были в тегах над информационными блоками. Нужные теги могут только выглядывать. Но как только мышка прошлась над доступной частью, стиль CSS hover может поднять z-index. При уходе мышки все вернется на свои места.

Псевдокласс CSS hover в сочетании с правильным применением правил CSS — хороший, простой, надлежаще работающий сайт.

CSS-эффект появления тени при наведении

Начнем с самого простого эффекта – это эффект появления тени при наведении.

Заказать звонок

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

  1. 1.Прежде всего, мы открываем страницу или запись или виджет, или файл темы, где у вас расположен этот элемент.
  2. 2.Далее нам нужно будет присвоить ему класс с названием hover-effect1. В моём примере он присвоен для кнопки и для изображения.

    PHP

    <div class=»coll-me-btn hover-effect1″>Заказать звонок</div>
    <img src=»images/example3.jpg» alt=»Пример изображения для эффектов при наведении» class=»hover-effect1″ />

    1
    2
    3

    <div class=»coll-me-btn hover-effect1″>Заказатьзвонок<div>

    <img src=»images/example3.jpg»alt=»Пример изображения для эффектов при наведении»class=»hover-effect1″>

    Кстати, в WordPress, для того, что бы присвоить CSS-класс изображению не нужно переходить на вкладку «Текст», а можно просто кликнуть по изображению на вкладке «Визуально», далее кликнуть по значку карандашика.

    Затем разворачиваем дополнительные настройки, и здесь мы можем дописать дополнительный CSS-класс. После чего нажимаем на кнопку «Обновить».

  3. 3.После того как мы присвоили нужный класс, нам нужно в файл style.css активной темы добавить определенный фрагмент кода, который собственно говоря, и позволит нам добавить тень.
  4. 4.Для внесения изменений в файл стилей либо подключаемся к нашему сайту по FTP. Я для этого обычно использую программу NotePad++.

    Как пользоваться программой NotePad++ я рассказывала в этой статье: Редактирование файлов сайта в Notepad++

    Либо же можно перейти в раздел «Внешний вид» => «Редактор». Здесь у нас обычно файл стилей открыт сразу же по умолчанию. Но на всякий случай убедитесь, что у вас в заголовке над рабочей областью написано «Таблица стилей (style.css)».

  5. 5.Прокручиваем в самый конец и здесь, в самом конце нашего файла нам необходимо добавить следующий CSS-код:

    PHP

    /**Появление тени**/
    .hover-effect1 {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }
    .hover-effect1:hover {
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    box-shadow:0 0 10px #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    /**Появление тени**/

    .hover-effect1{

    -webkit-transitionall0.5sease;

    -moz-transitionall0.5sease;

    transitionall0.5sease;

    }
     

    .hover-effect1hover{

    -moz-box-shadow10px#000;

    -webkit-box-shadow10px#000;

    box-shadow10px#000;

    -webkit-transitionall0.5sease;

    -moz-transitionall0.5sease;

    transitionall0.5sease;

    }

После чего нажать на кнопку «Обновить файл» внизу страницы

Для того, чтобы у нас определённые CSS-свойства работали при наведении, нам необходимо использовать псевдокласс :hover.
CSS-стили, которые написаны для этого селектора будет работать только в том случае, когда на элемент наведен указатель мышки.

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

Так же, для того, что бы эта тень у нас не только появлялась, но и исчезала плавно, нам необходимо свойство transition для самого класса hover-effect1

Так же для этой тени вы можете изменять смещение, уровень размытия, цвет и т.д. Более подробно об этом у меня было отдельное видео и отдельная статья, с которой вы можете ознакомиться по этой ссылке: Как сделать тень картинки в CSS?

Нover эффект css для картинок №1 — Увеличение.

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

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

/*Увеличение картинки*/
.grow img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.grow img:hover {
width: 400px;
height: 400px;
}

Ну а вот и HTML разметка для данного примера, ставьте ее в статью, еще куда, на ваше усмотрение.

<div class="grow pic">
<img src="https://filwebs.ru/hover-effekty-css-dlya-kartinok/#" alt="портрет"/>
</div>

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

CSS-эффект увеличения при наведении

Заказать звонок

Этот эффект при наведении создаётся аналогично предыдущему. Нам просто нужно присвоить нужному элементу на сайте класс «hover-effect2» и добавить в файл стилей style.css следующий код:

PHP

/**Эффект увеличения**/
.hover-effect2 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hover-effect2:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/**Эффект увеличения**/

.hover-effect2{

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}
 

.hover-effect2hover{

-webkit-transformscale(1.1);

-moz-transformscale(1.1);

-o-transformscale(1.1);

transformscale(1.1);

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}

Для увеличения элемента мы используем CSS свойство transform: scale(1.1);

В скобочках указывается значение увеличения или уменьшения. 1 это размер 100%, если нам нужно увеличить элемент на 10% указываем в скобочках 1.1. Для увеличения на 20% указываем 1.2 и так далее. Для уменьшения на 10% пишем 0.9.

Это CSS-свойство, так же как и предыдущее указывается с кроссбраузерными префиксами.
Ну и, конечно же, везде добавляем CSS свойство transition для более плавной анимации.

CSS-эффект плавного смещения при наведении

Заказать звонок

Как и для предыдущих примеров присваиваем нужному элементу СSS-класс «hover-effect3»

И в файле style.css дописываем код:

PHP

/*Плавное смещение при наведении*/
.hover-effect3 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hover-effect3:hover{
margin-top:-20px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

/*Плавное смещение при наведении*/

.hover-effect3{

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}
 

.hover-effect3hover{

margin-top-20px;

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}

Здесь для смещения элемента используется CSS свойство margin, которое отвечает за внешний отступ.
Для него мы можем задать следующие значения:

  • margin-top:20px; — для отступа сверху
  • margin-bottom: 20px; — для отступа снизу
  • margin-left: 20px; — для отступа слева
  • margin-right: 20px; — для отступа справа

Значение может быть как положительным так и отрицательным.

A true 3D button animation using three.js

This one isn’t pure CSS, but I thought I’d include this to show you the type of things that are possible when bringing JS into the picture. This is a «true» 3D hover effect button by Robin Delaporte:

See the Pen
on CodePen.

Look at that! If you move your mouse around the button area, the shapes react to your mouse movements.

Now, when I say «true» 3D, obviously it’s not actually 3D since it’s a flat image on your screen! I just mean that there’s a Z-axis involved. These are not simply 2D objects at different depths, moving at different rates (as is the case with parallax ). The angle and position of the object along the Z-axis are calculated in JS. This means you can move or rotate it along the third dimension, and add lighting effects to really bring it to life.

To do this, Robin has used a JS library called three.js — a very popular library for making 3D animations on the web, and it’s actually fairly easy to get started with. Of course, you’ll need some practice to create something like this, but if you really study it, you can make some amazing stuff.

Your browser does not support the video tag.

Speaking of easy-to-use JS libraries that help you make great stuff, you might also like fullPage.js. fullPage helps you make gorgeous one-page sites quickly and easily, and it works like a charm alongside WordPress, React, and Vue.

We’ve been talking a lot about using animations to improve the visual appeal of your site in this post, and if you’re into this sort of thing have a look at the . You can use different effects as you scroll from one full-screen page to the next (the is pretty snazzy for instance), or in sliders. All of this is built-in and works out of the box.

And of course, you can integrate all of the awesome CSS button hover effects we’ve just looked at into your fullPage.js site! In fact, the background image change button could work really well on a full-page site — give fullPage.js a try and see what you can come up with!

Универсальное свойство transition

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

Это свойство является короткой записью для следующих свойств, которые мы изучили (список соответствует порядку указания значений):

  • transition-property (none | all | property)
  • transition-duration (time (s/ms))
  • transition-timing-function (linear | ease | ease-in | ease-out | ease-in-out | steps(int,start|end) | step-start | step-end | cubic-bezier(n,n,n,n))
  • transition-delay (time (s/ms))

Синтаксис свойства:

transition:"property duration timing-function delay"; /* порядок важен */

Обращаю Ваше внимание, что если вы хотите задать только задержку (transition-delay), то вам придется указать и продолжительность (transition-duration) равную нулю (0s). Например, если вы хотите указать задержку 4 секунды, то вам необходимо записать это так:

transition: 0s 4s; /* задержка четыре секунды */

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

transition: width 2s ease 100ms, height 1s linear 2s, background 0s 4s;

/* Для свойства width мы устанавливаем длительность эффекта перехода равную 2 секунды,
при этом эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется (ease)
и это всё происходит с предварительной задержкой в 100 миллисекунд.

Для свойства height мы устанавливаем длительность эффекта перехода равную 1 секунде,
при этом эффект перехода происходит с одинаковой скоростью от начала до конца (linear)
и это всё происходит с предварительной задержкой в 2 секунды.

Свойство background будет применено с задержкой 4 секунды. */

Давайте, в заключение статьи рассмотрим пример в котором создадим переходный эффект для элемента <input>.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования универсального свойства transition</title>
<style>
input {
width: 20%; /* ширина элемента */
transition: width 500ms ease-in-out; /* описываем переходный эффект (свойство, продолжительность и функция) */
}
input:focus {
width: 40%; /* ширина элемента при фокусе на элементе */
}
</style>
</head>
	<body>
		Поиск: <input type = "text" name = "poisk" placeholder = "введите запрос">
	</body>
</html>

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

Результат нашего примера:


Рис. 170 Пример использования универсального свойства transition.

Бонус: Навигационная цепочка или “хлебные крошки”

Существует множество полезных способов использовать свойство , и я не удержался, добавив еще один.

Поскольку слэш и другие символы, используемые для разделения “хлебных крошек”, являются чисто стилистическими, имеет смысл определить их в CSS. Как и многие примеры в этой статье, этот эффект опирается на псевдокласс — доступный только в CSS3:

.breadcrumb a:first-child::before {  content: " » ";}.breadcrumb a::after {  content: " /";}.breadcrumb a:last-child::after {  content: "";}

5. Эффект параллакса

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

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

Выезжающая иконка

Пример:

Здесь тот же принцип, что и в предыдущем примере, – анимируется положение иконки внутри ссылки при наведении на нее. Только верстка немного изменена — иконка задается как background к псевдоэлементу :before.

1
<a class="btn2" href="#"><span>Текст кнопки</span></a>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
.btn2 {
    overflow hidden;
    background rgb(176, 12, 12);
    color white;
    height 35px;
    line-height 35px;
    width 130px;
    display block;
    text-aligncenter;
    font-family arial;
    font-size 16px;
    text-decoration none;
    position relative;
    -webkit-transition all 0.5s ease;
    -moz-transition all 0.5s ease;
    -ms-transition all 0.5s ease;
    -o-transition all 0.5s ease;
    transition all 0.5s ease;
    }
.btn2:before {
    content '';
    background url('https://ktvd.ru/wp-content/uploads/phone.png') top left no-repeat;
    width 15px;
    height 15px;
    display inline-block;
    position absolute;
    top6px;
    left-20px;
    -webkit-transition all 0.3s ease;
    -moz-transition all 0.3s ease;
    -ms-transition all 0.3s ease;
   -o-transition all 0.3s ease;
   transition all 0.3s ease;
}
.btn2:hover:before {
   left6px; 
   -webkit-transition all 0.3s ease;
   -moz-transition all 0.3s ease;
   -ms-transition all 0.3s ease;
   -o-transition all 0.3s ease;
  transition all 0.3s ease;
}
  .btn2 span {
   margin-left ; 
  -webkit-transition all 0.3s ease;
  -moz-transition all 0.3s ease;
  -ms-transition all 0.3s ease;
  -o-transition all 0.3s ease;
  transition all 0.3s ease;    
}
 
.btn2:hover span {
    margin-left 10px;
  -webkit-transition all 0.3s ease;
  -moz-transition all 0.3s ease;
  -ms-transition all 0.3s ease;
  -o-transition all 0.3s ease;
  transition all 0.3s ease;
}

Внешний элемент .btn2 должен иметь position: relative, так как блок с иконкой спозиционирован абсолютно. Также есть небольшая анимация margin на span с текстом внутри .btn2 (.btn2:hover span), которая отодвигает его при появлении иконки.

Media Queries Level 4

Медиазапросы великолепны. Они в одиночку внедрили адаптивный веб-дизайн и их по праву считают краеугольным камнем современной мобильной веб-разработки. Организация W3C добавила функции взаимодействия с мультимедиа в качестве рекомендации для L4 Media Queries, которые мы можем использовать для распознавания устройств с сенсорным экраном.

Четвертый уровень медиазапросов включает в себя: ,, , . Они предоставляют информацию о возможности применения и типе пользовательского ввода. Например, будет true, если элемента активируется курсором мыши. А будет true, если какой-либо ввод имеет ограниченную точность (например, касание по сенсору). Эти мультимедийные функции предоставляют достаточно информации для правильного взаимодействия с .

Одна из проблем заключается в том, что медиазапросы на данный момент являются рекомендательными. Это означает, что они могут измениться или даже быть удалены в любое время. Помните об этом при работе с ними. На данный момент это определенно работает, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (кроме, конечно, IE), делает наше будущее еще более оптимистичным.

Пример с использованием только CSS

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

6. Кадрирование изображения при помощи анимации

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

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

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

7. Режимы наложения

Если у вас есть опыт использования Adobe Photoshop, тогда вы, вероятно, знаете, насколько разнообразными могут быть режимы наложения для создания неповторимых и интересных эффектов. Но знаете ли вы, что большинство из этих режимов наложения также доступны в CSS?

Вот так выглядит домашняя страница Medium, если у изображений выставлено свойство на светло-голубой (lightblue) и на :

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

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

8. Имиджборд в стиле Pinterest

CSS Grid и Flexbox значительно упростили процесс создания различных типов адаптивных макетов, а также позволили нам легко центрировать элементы по вертикали, что прежде было очень сложно.

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

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

Чтобы это сработало, вам нужно обернуть свои элементы в и присвоить этому блоку свойства и .

Затем, чтобы предотвратить разделение элементов между двумя колонками, добавьте отдельным элементам.

Приведенный выше пример также отлично иллюстрирует псевдокласс . Он идет вместе с псевдоклассом , поэтому все элементы, кроме того, на который наведен курсор, угасают.

Дополнительные ресурсы

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

К ним относятся такие функции, как keyframe анимация, scroll-snapping (умная прокрутка), более сложная панель навигации, 3D-эффекты, CSS-оптимизация веб-страницы для печати

Было трудно составить список из 8 CSS приемов, так как были и другие пункты, которые я бы хотел добавить. К ним относятся такие функции, как keyframe анимация, scroll-snapping (умная прокрутка), более сложная панель навигации, 3D-эффекты, CSS-оптимизация веб-страницы для печати.

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

«Падающая» иконка

Пример:

Верстка этого элемента состоит из внешнего элемента А со SPAN внутри, который содержит иконку в качестве background:

1
<a class="my-button"><span class="icon-block"></span>Текст кнопки</a>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
.my-button {
    overflowhidden;
    display inline-block;
    height 35px;
    line-height 35px;
    background green;
    padding  10px;
    color white;
    text-decoration none;
    font-family arial;
    cursor pointer;
 }
 
.icon-block {
    position relative;
    background url('https://ktvd.ru/wp-content/uploads/phone.png') top left no-repeat;
    width 15px;
    height 15px;
    display block;
    float left;
    margin7px 7px  ;
 
}
.my-button:hover .icon-block {
    -webkit-animation anim 0.6s linear 0s 1;
	-moz-animation anim 0.6s linear 0s 1;
	-o-animation anim 0.6s linear 0s 1;
    animation anim 0.6s linear 0s 1;   
	}
 
  @-webkit-keyframes anim {
 0%{top13px;opacity1}
    30%{top5px;opacity1}
    60%{top70px;opacity1}
    70%{top70px;opacity}
    80%{top -50px;opacity}
    100%{top13px;opacity1}
}
@-moz-keyframes anim {
 0%{top13px;opacity1}
    30%{top5px;opacity1}
    60%{top70px;opacity1}
    70%{top70px;opacity}
    80%{top -50px;opacity}
    100%{top13px;opacity1}
}
@-o-keyframes anim {
 0%{top13px;opacity1}
    30%{top5px;opacity1}
    60%{top70px;opacity1}
    70%{top70px;opacity}
    80%{top -50px;opacity}
    100%{top13px;opacity1}
}
 
@keyframes anim {
0%{top13px;opacity1}
    30%{top5px;opacity1}
    60%{top70px;opacity1}
    70%{top70px;opacity}
    80%{top -50px;opacity}
    100%{top13px;opacity1}
}

Как видно из примера, анимация происходит вследствие изменения значения top у блока с иконкой. У внешнего блока нужно обязательно указывать overflow: hidden, так как иконка уезжает за его пределы.

Шаг 3. Кастомизируем CSS под себя

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

  • Размер изображения: измените значения в приведенном выше коде на свои;
  • Чтобы отображать блок с изображением в центре родительского блока укажите значение margin равное 0 auto;

    CSS

    	.block {
    		height: 425px;
    		margin: 0 auto;
    		width: 640px;
    	}
    
  • Измените значение свойств transition у изображения и блока с подписью;
  • У блока с подписью ширина должна быть такой же как у изображения;

    CSS

    	.block img {
    		transition: all 1s ease-in-out 0s;
    		-moz-transition: all 1s ease-in-out 0s;
    		-webkit-transition: all 1s ease-in-out 0s;
    		-o-transition: all 1s ease-in-out 0s;
    	}
    	.block .block-caption {
    		transition: all 0.2s ease-in-out 0s;
    		-moz-transition: all 0.2s ease-in-out 0s;
    		-webkit-transition: all 0.2s ease-in-out 0s;
    		-o-transition: all 0.2s ease-in-out 0s;
    		width: 640px;
    	}
    
  • CSS-cвойства transform поддерживаются не всеми браузерами, поэтому помимо стандартного свойства, приходится использовать нестандартные (с префиксами браузеров):
    • transform: стандартное правило;
    • -webkit-transform: Chrome и Safari;
    • -moz-transform: Firefox;
    • -o-transform: Opera;

    Для получения подробной информации о поддержке CSS-правил transform различными браузерами, посетите сайт caniuse.com.

  • Для получения различных анимационных hover эффектов, поэкспериментируйте над значениями scale(), rotateZ() и rotateY();

    CSS

    	.block:hover img {
    		transform: scale(1.5) rotateZ(-5deg);
    		-moz-transform: scale(1.5) rotateZ(-5deg);
    		-webkit-transform: scale(1.5) rotateZ(-5deg);
    		-o-transform: scale(1.5) rotateZ(-5deg);
    	}
    

Что делать если не получается задать класс для элемента?

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

В этом случае мы можем:

  1. 1.Проинспектировать код данного элемента при помощи встроенных инструментов для вебразработчиков в любом браузере. Как это делается я писала в этой статье: «Как определить ID и класс элемента на странице?»
  2. 2.Определить его класс и вставить в CSS файл вместо класса того эффекта, который вам понравился. Например:

    PHP

    .logo {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }
    .logo:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    .logo{

    -webkit-transitionall0.5sease;

    -moz-transitionall0.5sease;

    transitionall0.5sease;

    }
     

    .logohover{

    -webkit-transformscale(1.1);

    -moz-transformscale(1.1);

    -o-transformscale(1.1);

    -webkit-transitionall0.5sease;

    -moz-transitionall0.5sease;

    transitionall0.5sease;

     
    }

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: