Масштабирование картинки при наведении


Содержание

Плавное увеличение изображения при наведении CSS

Довольно частая практика на современных сайтах — плавное увеличение блока с изображением. Как же это сделать с помощью CSS?

Плавное увеличение изображения при наведении курсора CSS

Делим решение задачи на два этапа: разметка html и стили css. Для начала разметим блоки с изображениями внутри:

Всем блокам присвоили класс box. Одним из важных его свойств будет overflow:hidden, то есть скрыть всё, выходящее за рамки блока. Будем же увеличивать изображение? Да. Но видима будет только часть, ограниченная блоком.
Это мы разобрали. Переходим к описанию стилей.

Всё как и оговаривали — квадратные блоки, схожие по размеру со стандартным, не увеличенным изображением, то тоже 250 на 250.
Свойство overflow:hidden как и говорилось ранее, не позволить выходить за рамки блока при увеличении.
Свойства касающиеся изображений:

Тут без CSS3 никуда. Все современные браузеры анимацию отобразят. Нужны параметры transition и transform. Время на анимацию выставляем 1 секунду (1s). Увеличение будет происходить в 1.2 раза. Вы можете изменить на Ваш вкус.
Теперь к примеру работы!

Масштабирование картинки при наведении

Ребят, как решить задачу посредством css?

Есть картинка 144х288px. При наведении нее появляется другая картинка. Проблема в том, что вторая картинка может быть любого размера и нужно ее как-то вписать в контейнер, в текущем варианте она выглядит ужасно.

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

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

03.12.2020, 13:57

Поднятие картинки при наведении
Всем доброго времени суток! Возник такой вопрос: имеется блок div, в нем содержится картинка и.

Затемнение картинки при наведении
Приветствую! Есть код ‘Затемнение картинки при наведении’ img:hover < opacity:0.7; /* FF.

Увеличение картинки при наведении
Нужно увеличивать картинку, когда не нее наведен курсор

сдвиг картинки при наведении
есть ссылка (картинка) и ну чтобы при наведении на нее она сдвигалась на 5px в них и право .

Увеличение картинки при наведении
Доброго времени суток! В шаблоне Helium, частица Content Cubes. Сейчас выводится фото в.

03.12.2020, 13:57

Смена картинки при наведении
Всем доброго времени суток) В общем у меня вопрос касательно смены картинки при наведении.

Изменение картинки при наведении на ссылку
Допустим, есть таблица всего с двумя ячейками: в одной должна меняться картинка, в другой 3 ссылки.

Увеличение картинки при наведении на ссылку
Имеется такой вот код. Картинка представленна ссылкой, которая увеличивается при наведении. И.

Как сделать так, чтобы при наведении курсора картинка увеличивалась, но не выходила за границы соседних?

Коллеги, пожалуйста помогите! На сайте должна располагаться матрица из фотографий 3 на 3 и анимация, при наведении курсора на каждую из них, увеличивает слегка. Но при увеличении, увеличивающаяся картинка своими краями залезает на соседние. Как сделать, чтобы она как бы увеличивалась внутри?

  • Вопрос задан более двух лет назад
  • 1131 просмотр

Для этого необходимо поместить каждое изображение в блок, и задать этому блоку overflow: hidden

Девять простых примеров CSS3 анимации

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

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

Для более детального ознакомления вы можете скачать архив с файлами.

Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

2. Появление рамки

Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:

3. Свинг

Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

  • @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
  • animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

4. Затухание

Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

Илон Маск рекомендует:  Что такое код cpdf_setgray_stroke

7. Трансформация в круг

Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:

8. Вращение

Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer Поддерживается версией IE 10 и выше
Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
Opera Поддерживается с версии 12.1
Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )
Мобильные браузеры
iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
Opera Mobile Поддерживается с версии 12.1
Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
Chrome/Firefox для Android Поддерживается с версии 47/44
Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
UC Browser для Android Поддерживается с префиксом -webkit-

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

Увеличение картинки при наведении курсора

.zoom img <
-webkit-transition:all 1s linear 0s;
-moz-transition:all 1s linear 0s;
-o-transition:all 1s linear 0s;
transition:all 1s linear 0s;
-webkit-transform-origin:center !important;
-moz-transform-origin:center !important;
-ms-transform-origin:center !important;
-o-transform-origin:center !important;
transform-origin:center !important;
>
.zoom:hover img <
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);
>

Пример размещения кода:

Способ 2: увеличение картинки в размерах

Для этого проделаем те-же шаги, что и в первом случае, но вставим код немного другой:

.zoom <
-webkit-transition:all 1s linear 0s;
-moz-transition:all 1s linear 0s;
-o-transition:all 1s linear 0s;
transition:all 1s linear 0s;
-webkit-transform-origin:center !important;
-moz-transform-origin:center !important;
-ms-transform-origin:center !important;
-o-transform-origin:center !important;
transform-origin:center !important;
>
.zoom:hover <
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);
>

Получаем результат плавного увеличения картинки в размерах:

Способ 1: увеличение картинки внутри блока

3. Переходим в свойства страницы и добавляем в секцию head код:

Пример размещения кода:

Способ 2: увеличение картинки в размерах

Для этого проделаем те-же шаги, что и в первом случае, но вставим код немного другой:

Получаем результат плавного увеличения картинки в размерах:

Сказали Cпасибо: Nikolayiv, redgruppa, quaattrroo, azamat1980

Код приведен одинаковый в двух местах.
Можно ли исправить нижний код, никак не могу добиться нужного эффекта?

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

@media screen and (min-width:768px) <
.zoom img < -webkit-transition:all 1s linear 0s;
-moz-transition:all 1s linear 0s;
-o-transition:all 1s linear 0s;
transition:all 1s linear 0s;
-webkit-transform-origin:center !important;
-moz-transform-origin:center !important;
-ms-transform-origin:center !important;
-o-transform-origin:center !important;
transform-origin:center !important;
>
.zoom:hover img <
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);
>
>
» />

Привет, подскажите пожалуйста можно ли сделать чтобы при наведении на передний план фотка выпрыгивала? и от чего зависит качество фотки, такое ощущение что замылено качество . И еще вопрос, можно ли на мобильной версии убрать этот эффект, делаю через точку остановки .

Привет.
Чтобы каждая из фоток всегда при увеличении была поверх всех, потребуется написать javascript, т.е. только при помощи css не сделать. Я бы вам тут порекомендовал лучше применить первый способ, чтобы картинка увеличивалась внутри своего контейнера, а не поверх его.
Если вы имеете в виду, что при увеличении качество картинки меняется, то это естественно, ведь изначальный размер у неё меньше. Чтобы было не так заметно ухудшение качества, попробуйте сделать изображения в формате png, и немного уменьшить коэффициент масштабирования.

Да, показать или отключить только на конкретной точке (точках) остановки конечно можно. В css это называется «медиа-запросы». Рекомендую почитать учебники об этом в сети.
Например, для вашего случая это могло бы выглядеть примерно так (ваш css-код будет работать только при ширине экрана болеее 768px):

Эффект приближения (зум) на CSS для картинок

Рубрики
Свежие записи

Здравствуйте. Сегодня мы поговорим о эффекте приближения (зума) на CSS для изображений.

Припустим у нас есть картинка, вставляем HTML код:

Наши картинки имеют класс image к которому мы и будем задавать стили:

Создаем блок размером 380 на 250 пикселей. Наш блок будет идентичного размера как и изображение 380px на 250px . Стоит учесть, что для коректного увеличения картинки, ваше изображение должно быть точного размера с блоком (подгоняем эти размеры), иначе будет некрасиво.

Так же не забываем за overflow:hidden; . Это нужно для того, чтобы когда изображение зумируется, оно не выходило за наш блок.

Dobrovoi Master

Оригинальные hover-эффекты для изображений на чистом CSS3

Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое hover-эффекты. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом CSS3.
Сегодня я подготовил большую подборку оригинальных hover-эффектов для изображений созданных с помощью CSS3, без подключения javascript-библиотек. О достоинствах и недостатках реализации hover-эффектов на чистом CSS3 не буду, это другая тема, просто смотрите примеры, и при необходимости используйте понравившийся у себя на сайте. Все эффекты представленные в обзоре снабжены демонстрационным примером и подробной документацией с исходниками. Мануалы по-большей части на буржуинском, но всё более-менее интуитивно понятно.

Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

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

Hover Effect Ideas

Очень интересный эффект при наведении на миниатюры изображений, с использованием тонких линий в конструкции и типографии. Несколько различных видов эффектов появления подписей к картинкам, мягкие и не навязчивые 3D-преобразования, и плавные переходы псевдо-элементов. Работает только в современных браузерах.

iHover

iHover это впечатляющая коллекция эффектов при наведении на чистом CSS3, с поддержкой Bootstrap 3. Построен на Scss CSS (файл), легко модифицируется переменными. Код модульный, нет необходимости включать в работу весь файл. 30+ различных эффектов в одном пакете. Всё довольно хорошо документировано, эффекты очень просты в использовании. Все, что вам нужно сделать, это правильно выстроить HTML-разметку и подключить файл CSS в работу.

Caption Hover Effects

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

Эффект перехода CSS3

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

Hover-эффекты для миниатюр на CSS3

Разработчик позиционирует свою работу, как пример галереи изображений с эффектами переходов при появлении аннотаций(подписей) к миниатюрам. Заявлена уверенная поддержка современными браузерами, включая IE 9+. Полноценной галереей, конечно назвать это сложно, а вот эффект появления подписей, довольно интересный.

Circle Hover Effects

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

Вращение миниатюр при наведении

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

Sexy Image Hover Effects

Если перевести дословно:»Сексуальный эффект при наведении на изображения». Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.

5 Hover-эффектов на CSS3

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

Анимация подписей изображений

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

Hover-эффекты с элементами анимации

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

Изменение яркости картинок

Данный эффект особого ничего из себя не представляет, банальная смена яркости изображений при наведении, разве что добавлены элементы анимации. Разбираться с подробностями реализации придётся самостоятельно, разложив исходники демо.

10 Image Hover Effects

Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.

Border Animation Effect

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

Original Hover Effects With CSS3

Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.

Shape Hover Effect

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

Раздвижные изображения


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

Slick CSS3 Animated Image

С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.

Всплывающая подпись при наведении

Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.

Диагональное появление подписи

Подпись к изображению появляется из угла и расширяется на всю площадь картинки по диагонали.

Анимированные заголовки миниатюр

Ещё несколько интересных решений для реализации всплывающих подписей к миниатюрам изображений. В онлайн-редакторе вы можете поэкспериментировать с параметрами и добиться более впечатляющих результатов.

Подчёркнутые или очерченные подписи к миниатюрам

Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.

Причудливые формы и zoom-эффект

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

Слайд-эффект для подписей изображений

Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только CSS3 и HTML5.

6 Подписей к картинкам

6 Вариантов появления всплывающих подписей к картинкам при наведении с помощью CSS3. Подробнейший урок по реализации и настройке, доступные для скачивания исходники.

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

Об этом способе я рассказывал в одном из предыдущих своих уроков: Тынц.

Хотите приступить к работе над созданием сайта как можно быстрее? Теперь это абсолютно возможно! По той простой причине, что на маркетплейсе TemplateMonster появился новый раздел с HTML шаблонами на русском языке . Коллекция будет пополняться, но и сейчас уже можно присмотреть что-то подходящее для вашего онлайн-проекта. Все, что вам нужно сделать — это выбрать свое идеальное готовое решение и поработать с презентацией нужной информации. И не забывайте, что текст для шаблона был написан вручную.

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

CSS эффект при наведение на картинку

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

ПОДПИСКА на УРОКИ

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

See the Pen EbdNyb by Denis (@Dwstroy) on CodePen.

CSS эффект описываем каркас блоков для трансформации

Скачиваем подготовленный шаблон, в нем два файла, Index в котором подключен CSS. В CSS сбросили отступы, установили шрифт, и подключили на задний фон изображение. В самой папке /img лежат два файла, фон и картинка для примеры.

Описываем все блоки, которые нужно вывести на страницу, и заполняем их текстовым содержанием.

Описываем основные стили картинки / эффект на css

Задаем блоку с картинкой фиксированную ширину и высоту, а при помощи overflow: hidden , скрываем все лишнее за ее пределами, добавляем курсор.

Позиционируем для удобства блок посередине экрана.

Затем картинке делаем ширину в 100% и вешаем плавное анимирование в пол секунды.

Далее трансформируем, немного разворачиваем rotate(-10deg) , и увеличиваем в размере scale(1.3) .

Задаем фильтр размытия в 1 пик. filter: blur(1px) и затемним фон, а для этого допишем классу .blocImg черный фон, а при наведении саму картинку делаем на половину прозрачной opacity: .5; .

Теперь приступим к стилилизации текста.

Оформляем текстовое содержание блока

Абсолютно родителя позиционируем блок с текстом .blocText и задаем отступы по всем краям в 30 пик. По рамке в дальнейшем сделаем анимированное ее появление.

Для текста задаем белый цвет, делаем заглавными буквами, устанавливаем padding по краям.

Заголовку второго уровня задаем 25 пик.

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

Параграф позиционируем абсолютно, опускаем его на 180 пик. задаем ширину его блока в 250 пик. Добавляем с левой стороны border в 4 пик. и задаем внутренние отступы.

Описываем псевдоэлементы ::before и ::after

Уберем обводку outline , которую до этого задавали классу .blocText и зададим ее для псевдоэлементов.

Создаем псевдоэлементы ::before ::after , описываем их основные стили.

Позиционируем их абсолютно, задаем ширину и высоту по 100% и платное появление в пол секунды.

Отдельно ::before присваиваем бордюр с верху и низу в 1 пик. и задаем трансформацию для оси Х transform: scale(0,1) .

Тоже самое делаем для ::after только бордюр теперь с левой и правой стороны, а трансформация по оси Y

А для их появления, трансформацию для всех осей указываем в 1.

И остается скрыть текст, для этого классу .text присвоим opacity: 0 и добавим плавное его появление.

А по наведении текст отображаем.

В конечном итоге получили классный Hover Effects при наведение на картинку.

Кому видео было интересно, делитесь им с друзьями в социальных сетях, и не забывайте при этом комментировать.

Урок подготовил Горелов Денис.

Оставить комментарий:

Отзывы

Здравствуйте, подскажите пож-та что прописать в файле style.css что бы описание картинки было только при наведении курсора, а то описание расширяет рамку и смотрится не красиво. Вот содержание:
/* set some basic CSS for NextGEN Download Gallery */

.ngg-download-frm hr <
display: block;
float: none;
clear: both;
background: transparent;
border: none;
border-bottom: 1px solid #ccc;
padding-top: 1em;
margin: 1em auto;
>

Создаем оригинальные hover-эффекты при помощи CSS3

Мощь CSS3 огромна и в этом уроке вы сможете увидеть, как использовать его креативно. Мы собираемся создать несколько эффектов при наведении курсора мыши с помощью CSS3 transitions. При наведении курсора на эскиз будет показываться описание миниатюр, с использованием различных стилей в каждом примере.

Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

HTML-разметка

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

Внутри блока с классом view вставим элемент с классом mask, который будет отвечать за наши эффекты CSS3, внутри него мы и поместим название, описание и ссылку на полное изображение. (Для некоторых примеров, нам нужно будет добавить mask как отдельный элемент и обернуть описание в div с классом content.)

После создания разметки мы создадим наши стили.

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

А теперь мы рассмотрим десять эффектов.

Пример 1

Добавим специальный класс view-first в элемент с классом view для этого эффекта. Мы будем добавлять специальный класс для каждого экземпляра view элемента (view-first, view-second, view-third, и т.д.).

В первом примере мы будем использовать только некоторые базовые переходы, чтобы создать неплохой эффект при наведении курсора:

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

Пример 2

Во втором примере мы добавим специальный класс view-second, но мы оставим элемент с классом mask пустым и обернем описание в div с классом content.

Здесь класс mask будет иметь различные атрибуты, в частности мы собираемся применить свойство transform (translate и rotate). Описание элементов будут перемещены так, чтобы мы могли сдвинуть их вместе при наведении:

Для нашего hover-эффекта мы используем translate-преобразование для того, чтобы перемещать наши элементы на место. mask также будет поворачиваться. Элементы описания будут двигаться с небольшой задержкой:

Пример 3

В третьем примере мы будем использовать translate и rotate преобразование:

Это простые инструкции, которые будут применяться при наведении. Теперь мы будем переворачивать описание элементов, установив transition-delay соответственно:

Пример 4

В четвертом примере мы выполним простое уменьшение изображения и увеличение нашего контента с вращением, все это благодаря scale преобразованию. Мы установим transition-delay равным 0,2 для стилей изображения, но при наведении мы изменим его на 0s. Это позволит начать анимацию немедленно при наведении мыши, но задержать её когда курсор уходит.

Это инструкции, чтобы получить этот эффект — с CSS3 можно делать все :).

Пример 5

В этом пятом примере мы будем использовать свойство translate наряду с transition-timing-function ease-in-out для того, чтобы сдвинуть контент с левой стороны.

Эффект при наведении будет сдвигать изображение вправо и описание появится с левой стороны, как если бы оно сдвинуло картинку:

Пример 6

В этом примере мы сделаем описание появляющееся спереди, уменьшим изображение до исходного размера (scale c 10 до 1). Кнопка «read more» будет появляться снизу (translate).

Обратный переход будет задержан таким образом, чтобы он выглядел гладким:

Пример 7

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

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

Пример 8

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

Мы добавим анимацию для элемента mask и определим некоторые установки задержки для элементов описания:

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

Пример 9

В этом примере мы будем использовать два элемента mask, чтобы сдвигать их с правого нижнего и с левого верхнего углов:

Элементы mask будут иметь различные значения translation и transfrom-origin. А также мы укажем что один выровнен по верхней границе, а другой по нижней:

При наведении, мы сделаем так, что содержание будет появляться как бы из под двух, съезжающих в центр, элементов mask:

Мы настроили transition-delay для элементов mask таким образом, что, когда мы наводим курсор, переход происходит мгновенно, но при уходе мыши, задержка будет больше.

Пример 10

В последнем примере, мы будем увеличивать изображение, а затем прятать, перенося описание на передний план. Мы можем сделать это, используя шкалу преобразования (scale transform) и настраивая уровень прозрачности:

При наведении мы просто масштабируем изображение, а зачем прячем его, уменьшив его прозрачность до 0:

Заключение

CSS3 имеет действительно большой потенциал для создания красивых эффектов. Вскоре, надеюсь, мы будет в состоянии избегать использование JavaScript для создания простых эффектов и полагаться на 100% на CSS, во всех браузерах.

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

Создание эффекта масштабирования изображения при наведении с помощью CSS?

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

Вот один пример, который реализует то, что я хотел бы this.

Как насчет использования свойства CSS3 transform и использования scale , которые плохо дают эффект масштабирования, это можно сделать так,

HTML

CSS

Вот демо fiddle. Я удалил часть элемента, чтобы сделать его более простым, вы всегда можете добавить переполнение, скрытое к .image , чтобы скрыть переполнение масштабированного изображения.

zoom свойство работает только в IE

Предложение

Вместо .fader < inline-block; >рассмотрим использование некоторой сетчатой ​​системы. Основываясь на вашей технологии предпочтений, вы можете пойти Foundation, Susy, Masonry или их альтернативы.

Илон Маск рекомендует:  Body (тело) тело документа
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL