Hover-эффекты для изображений

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

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

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

Мне приходилось создавать и оформлять множество фотогалерей на различных сайтах, и в 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-фильров

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

Смотрите также:

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

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

Комментарии:

  • Ольга:

    Здравствуйте. Подскажите, я правильно поняла, что нужно иметь на сервере и image.jpg и image-large.jpg?

    Ответить
    • Alexander:

      Это любые картинки, которые будут отображаться в миниатюрах и по клику.
      image-large.jpg — та что открывается
      image.jpg — на которой эффект (превью)

      Ответить
  • Александр:

    Спасибо за привлекательное решение.
    Дополните пожалуйста, как настроить вывод большого изображения — без перехода на новую страницу сайта?
    Чтобы изображение всплывало и не открывалось как новая страница…

    Ответить
    • Alexander:

      Для этого нужно использовать какое-нибудь решение для модальных окон/галерей.
      Например fancybox

      Ответить
      • Александр:

        Спасибо за оперативный ответ. Буду пробовать

        Ответить
  • Александр:

    Спс !!! Это а*уенно!!

    Ответить
  • Алексей:

    Супер !!! Спс !!!

    Ответить