Нашел пачку примеров различных эффектов на картинках при наведении курсора.
https://codepen.io/nxworld/pen/ZYNOBZ
Как оказалось это илюстрации к статье на японском.
Я переписал этот код чтобы он больше походил на библиотеку а не на просто примеры к статье.
Убрал необычные теги вроде figure которые по сути выполняли функцию дива с отдельным классом, переписал чтобы класс эффекта указывать не на родителя а на соответствующий див, переписал имена классов в более читабельные, удалил некоторые частично дублирующиеся функции, вынес отдельно функции скорости эффекта и т.п. В общем провел рефакторинг.
Получилось вот так:
https://site04.8kb.ru/
Ну и сам CSS:
https://site04.8kb.ru/files/hoverEffect.css
У половины эффектов используется изменение размера картинки, так что приходится строго указывать размер контейнера, чтобы вылезающее обрезалось overflow: hidden;
Это неудобно для резиновой верстки.
Но в голову не приходит как это сделать.
Без размера - блок будет растягиваться при ресайзе картинки и лишняя часть вылазить.
Если картинку сделать зависимой от ширины блока (100% при обычной, 120% при увеличении и т.п.), а ширину блока ограничивать окружающим контекстом (например шириной колонки в бутстрапе), то что делать с высотой? Нужно сделать чтобы высота была пропорционально. Причем пропорционально содержащейся внутри картинке, т.е. авто не прокатит, картинка то у нас увеличивается, а див должен оставаться на месте.
Средний
