Фокус изображения CSS эффект наведения
Gadgetronicx > Веб-дизайн > Фокус изображения CSS эффект наведения
Фрэнк Дональд 17 июля 2013 г. 0 Комментарии
Коды некоторых потрясающих фотоэффектов с использованием HTML и CSS широко распространены в Интернете. Эффекты наведения в основном использовались для того, чтобы легко привлечь внимание посетителей, особенно к вашим важным изображениям или баннерам на вашем сайте. Давайте перейдем к части кодирования CSS-эффекта наведения фокуса изображения.
ПОСМОТРЕТЬ ДЕМО
КОД CSS:
РАМКА ВОКРУГ ИЗОБРАЖЕНИЯ:
Приведенный ниже код CSS добавит рамку вокруг вашего изображения и ограничит эффекты изображения внутри рамки и не помешает другим элементам вашей веб-страницы.
.pic img{
граница: 10px сплошная #fff;
плыть налево;
высота: 300 пикселей;
ширина: 300 пикселей;
поле: 20 пикселей;
переполнение: скрыто;
-webkit-box-shadow: 5px 5px 5px #111;
-box-shadow: 5px 5px 5px #111;
}
Этот код фокусирует изображение при наведении на него курсора.
ЭФФЕКТ ФОКУСА:
. сфокусировать изображение {
-webkit-transition: все 1с легко;
-moz-переход: все 1 с облегчением;
-o-переход: все единицы облегчаются;
-ms-transition: все 1 с облегчением;
переход: все 1 с облегчением;
}
.focus изображение: наведение {
граница: 70px сплошная #000;
радиус границы: 50%;
-webkit-transition: все 1с легко;
-moz-переход: все 1 с облегчением;
-o-переход: все единицы облегчаются;
-ms-transition: все 1 с облегчением;
переход: все 1 с облегчением;
} БЕЗ РАМОК:
Класс focus pic в теге
Библиотека схем — более 220 практических схем
Использование рамки вокруг вашего изображения дает вам много преимуществ, но для тех, кому нужно, чтобы их изображение сфокусировалось без рамки вокруг него, просто выполните следующие шаги, чтобы сделать это.
Но изображение без рамки может мешать другие веб-элементы, поэтому используйте его с осторожностью.
- Для этого замените первую строку приведенного выше кода эффекта фокусировки: «.focus img» на «img.focus»
- Затем замените 8-й «.focus img:hover» на «img focus:hover».
- Тогда все, что вам нужно сделать, это удалить теги определить class=»focus» внутри тега
.
- Тег
должен выглядеть так после изменений.
Масштабирование фонового изображения при наведении курсора в Divi с помощью 2 строк CSS
Тонкий эффект масштабирования фонового изображения при наведении курсора на элемент на веб-странице — это классный и современный эффект, который можно добавить на ваш веб-сайт.
Это также очень легко сделать в Divi всего двумя строками CSS.
Я видел другие руководства по этому вопросу, которые требуют копирования URL-адреса фонового изображения из медиа-менеджера и использования псевдоэлементов до и после.
Проблема с этим методом заключается в том, что если вам (или вашему клиенту) неудобно добавлять кучу CSS, становится сложно изменить фоновое изображение.Учебник, которым я собираюсь поделиться с вами, чрезвычайно прост, быстр и позволяет вам использовать опцию фонового изображения в Divi . Вам просто нужно добавить 3 строки CSS в переключатель Custom CSS на вкладке Advanced .
Если вы предпочитаете читать учебник о том, как это сделать, не стесняйтесь прыгать ниже видео.
Шаг 1: Добавьте фоновое изображение
Первый шаг — добавить фоновое изображение в раздел, строку или столбец, как обычно, используя встроенную опцию фона, доступную в каждом модуле.
Если вы когда-нибудь захотите изменить фоновое изображение в будущем, вы просто измените его, как обычно.
Шаг 2. Добавьте CSS
Затем перейдите на вкладку Advanced в окне редактора и откройте переключатель Custom CSS .
Здесь мы собираемся добавить нашу магию CSS.
В поле «Основной элемент» включите параметры наведения , щелкнув значок курсора мыши.
На вкладке Desktop
размер фона: 100%; переход: все 0,5 с легкости;
Мы хотим убедиться, что мы явно установили размер фона на 100% . Не стесняйтесь настраивать время перехода в зависимости от того, насколько быстрым должен быть эффект масштабирования.
В приведенном выше примере я установил значение 0,5 с , что составляет полсекунды.
После этого нам просто нужно указать, что должно происходить при наведении. Нажмите на вкладку Hover и добавьте следующий CSS:
background-size: 130%;
Это, вероятно, говорит само за себя, но когда мы добавляем этот код на вкладку Hover, он сообщает Divi
, что фоновое изображение должно увеличиться до размера 130% . - Тег
Проблема с этим методом заключается в том, что если вам (или вашему клиенту) неудобно добавлять кучу CSS, становится сложно изменить фоновое изображение.
