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

В этой заметке я старался как можно больше упростить оформление ховер-эффектов, при этом не потеряв их привлекательности.

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

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

Если есть необходимость подписать фотографию, то можно просто добавить текст ниже нее.

Вариант 1

Пример имеет 2 варианта иконки увеличения изображения — это шрифт FontAwesome и графическая zoom.png.

Шрифт FontAwesome: A
Графическая иконка: B
Вариант 2

Вариант аналогичен первому, со шрифтом FontAwesome и графической иконкой zoom.png.

Шрифт FontAwesome: A
Графическая иконка: B
Вариант 3

Идею позаимствовал у Мегафона. В этих вариантах не требуется графики или шрифтов, иконка располагается в CSS (base64).

Иконка: A
Иконка: B
Вариант 4

Варианты со свингом.

Вариант A со шрифтов FontAwesome и горизонтальным свингом.

Вариант B c графической иконкой zoom.png и вертикальным свингом.

Горизонтальный свинг и шрифт: A
Вертикальный свинг и иконка: B
Вариант 5

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

Пример имеет 2 варианта иконки увеличения изображения — это шрифт FontAwesome и графическая zoom.png.

Шрифт FontAwesome: A
Графическая иконка: B
Вариант 6

Данный пример также имеет 2 варианта иконки увеличения изображения (шрифт FontAwesome и графическая zoom.png).

Шрифт FontAwesome: A
Графическая иконка: B
Вариант 7

Еще один пример с двумя вариантами иконки увеличения изображения (шрифт FontAwesome и графическая zoom.png).

Шрифт FontAwesome: A
Графическая иконка: B
Вариант 8

Последний вариант очень простой, но имеет массу возможностей. Реализован он с использованием CSS-фильров

К примеру можно подогнать цвета галереи под цвета вашего сайта.

На эту тему:

Добавить комментарий

Ваш комментарий отправлен!