Hover эффекты над изображениями на CSS
Эффект наведения на блоки с изображениями и текстом.
Эффект наведения на блоки с изображениями и текстом.
Довольно-таки смелый hover эффект на изображении. При наведении происходит разделение блока на отдельные кусочки с общим фоном - картинкой.
Использование свойства clip-path при наведении для придания изображению формы стрелки с анимацией.
При наведении на картинку происходит плавный переход сквозь текстуру для показа другой картинки. При движении курсора мыши так же происходит наклон в 3d пространстве. Реализовано на three.js
Плоское изображение на канвасе с помощью js и шейдеров переводится в 3d.
jQuery плагин, который позволяет динамически менять масштаб изображения при наведении курсора мыши. Перемещая курсор, можно также зуммировать различные участки изображения.
Сегодня сделаем на чистом CSS3 смену изображений через эффект шторок - раздвигающихся панелей. Идея заключается в использовании фоновых изображений для панелей и их анимации при клике по <label>.
Лайтбокс (lightbox) очень здоровский скрипт для отображения изображений на странице. В этом уроке будет рассмотрен изменненый скрипт на базе лайтбокса. Особенности: изображение можно расширить, если изображение больше текущего размера окна браузера, размер изображения автоматически подгоняется под размер окна, можно наложить на изображение другую картинку (например, new - новинка), изображение можно увеличить с помощью колесика мышки и его можно перетаскивать.
Создаем анимацию скольжения элементов в контейнере или проще, смена слайдов при наведении курсора.
Ассиметричный слайдер изображений в котором при смене картинок происходит их небольшой поворот. Добавлена опция автозапуска и прокрутка с помощью колесика мыши. В слайдере будем использовать плагин jQuery 2D Transformation Plugin для поворота изображений и плагин jQuery Mousewheel Plugin для использования колесика мыши.
Ещё один простенький плагин с 16 вариантами всевозможных эффектов. Тестировался на Internet Explorer v7+, Firefox v3+, Google Chrome v4+, Safari v4+, Opera v10+
Для оживления галереи используется функция animate() и при наведении на картинку происходит плавное изменение цвета от черно-белого до цветного.