Hover image background image: html — Change background image on hover

background-image — CSS | MDN

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

Границы border элемента затем рисуются поверх них, и background-color рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS свойствами background-clip и background-origin.

Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none.

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

background-image: none;
background-image: url(http://www.example.com/bck.png);

background-image: inherit;

Значения

none

Это ключевое слово обозначает отсутствие изображений.

<image>

<image> (en-US) обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживается несколько фонов (en-US).

Официальный синтаксис

<bg-image># (en-US)
где 
<bg-image> = none | (en-US) <image> (en-US)
где 
<image> = <url> | (en-US) <image()> | (en-US) <image-set()> | (en-US) <element()> | (en-US) <paint()> | (en-US) <cross-fade()> | (en-US) <gradient>
где 
<image()> = image( <image-tags>? (en-US) [ (en-US) <image-src>? (en-US) , <color>? (en-US) ] (en-US)! (en-US) )
<image-set()> = image-set( <image-set-option># (en-US) )
<element()> = element( <id-selector> )
<paint()> = paint( <ident> (en-US), <declaration-value>? (en-US) )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? (en-US) )
<gradient> = <linear-gradient()> | (en-US) <repeating-linear-gradient()> | (en-US) <radial-gradient()> | (en-US) <repeating-radial-gradient()> | (en-US) <conic-gradient()>
где 
<image-tags> = ltr | (en-US) rtl
<image-src> = <url> | (en-US) <string> (en-US)
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
<image-set-option> = [ (en-US) <image> (en-US) | (en-US) <string> (en-US) ] (en-US) [ (en-US) <resolution> (en-US) || (en-US) type(<string> (en-US)) ] (en-US)
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? (en-US) && (en-US) <image> (en-US)
<cf-final-image> = <image> (en-US) | (en-US) <color>
<linear-gradient()> = linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ (en-US) from <angle> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US), <angular-color-stop-list> )
где 
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<side-or-corner> = [ (en-US) left | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) bottom ] (en-US)
<color-stop-list> = [ (en-US) <linear-color-stop> [ (en-US), <linear-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <linear-color-stop>
<ending-shape> = circle | (en-US) ellipse
<size> = closest-side | (en-US) farthest-side | (en-US) closest-corner | (en-US) farthest-corner | (en-US) <length> | (en-US) <length-percentage>{ (en-US)2} (en-US)
<position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)? (en-US) | (en-US) [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US) ] (en-US)
<angular-color-stop-list> = [ (en-US) <angular-color-stop> [ (en-US), <angular-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <angular-color-stop>
где 
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>
<linear-color-stop> = <color> <color-stop-length>? (en-US)
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | (en-US) <percentage>
<angular-color-stop> = <color> && (en-US) <color-stop-angle>? (en-US)
<angular-color-hint> = <angle-percentage>
где 
<color-stop-length> = <length-percentage>{ (en-US)1,2} (en-US)
<color-stop-angle> = <angle-percentage>{ (en-US)1,2} (en-US)
<angle-percentage> = <angle> | (en-US) <percentage>

Несколько фонов и прозрачность

Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.

HTML содержимое

<div>
    <p>
        This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p>
        Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
</div>

CSS содержимое

pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
}

div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}

BCD tables only load in the browser

CSS3 переход фонового изображения

Я нашел решение, которое сработало для меня …

Если у вас есть элемент списка (или div), содержащий только ссылку, и скажем, это для социальных ссылок на вашей странице на facebook, twitter и т. Д. и вы используете изображение спрайта, вы можете сделать это:

<li><a href="facebook.com"></a></li>

Сделайте фон «li» изображением вашей кнопки

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}

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

#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
}

Теперь все, что вам нужно, это «непрозрачность» в «a: hover» и установить для нее значение 1.

#facebook a:hover {
   opacity:1;
}

Добавьте атрибуты перехода непрозрачности для каждого браузера в «a» и «a: hover», чтобы окончательный CSS-код выглядел примерно так:

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}
#facebook a:hover {
   opacity:1;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

Если я объяснил это правильно, у вас должна появиться исчезающая кнопка фонового изображения, надеюсь, это поможет хотя бы!

Анимируем linear-gradient (background-image).

| by Mostovoy Nikita

При верстке, периодически необходимо создать фон, который является градиентной заливкой (картинкой или чем-то другим, нужное подчеркнуть).
Такую задачу вполне легко сделать, используя background-image (linear-gradient в случае с градиентной заливкой).

Разберем анимирование background-image в случае работы с кнопками:

Кнопка с background-image: linear-gradient

Её CSS:

При взаимодействии с кнопкой очень желательно получать “отклик”, например, при наведении (hover) на нее.
Один из способов организовать такой отклик — изменить background, как это сделано в разбираемом примере.

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

Установить просто transition: background не получится, так как background-image является не анимируемым свойством (www.w3schools.com/cssref/pr_background-image.asp)

Что можно сделать в таком случае, чтобы решить задачу?

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

С одной стороны, мы можем вкладывать в button какой-нибудь span, но это не особо удобный и масштабируемый подход. Почему подход неудобный? Представьте, что с кнопкой всегда нужно вставлять рядом span, не забывать об этом, да и для других элементов подобный подход будет доставлять неудобства. Поэтому обратимся к псевдоэлементам. Алгоритм действий в таком случае будет следующим:

1. Создаем кнопку
2. Задаем кнопке position: relative. Это позволит нам растягивать псевдоэлемент по размеру кнопки. Подход практически аналогичный тому, который я описывал в статье “Селекторы на любой вкус” (https://medium.com/@xnim/%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5-select-%D1%8B-%D0%BD%D0%B0-%D0%BB%D1%8E%D0%B1%D0%BE%D0%B9-%D0%B2%D0%BA%D1%83%D1%81-13c9a2a5bb36)
3. Задаем кнопке:
   — размеры (top:0; left: 0; width: 100%; height: 100%),
   — нужный background-image (для состояния hover)
   — z-index: -1 (чтобы контент псевдоэлемента не скрывал наш текст
   — opacity: 0 + transition: opacity для анимаций
4. Добавляем :hover состояние для кнопки, по которому наш псевдоэлемент будет проявляться.

Полученный результат можно посмотреть на СodePen:

Итоговый CSS:

На CodePen также можно поэкспериментировать с временем анимации 🙂

P.S. Я веду в телеграме небольшой канал, посвященный фронтенд-разработке. Ежедневно публикую тот или иной факт или механику из мира JS. https://t.me/FrontEndReicipes

Как изменить изображение при наведении курсора с помощью CSS

Тема: HTML / CSSPrev | След.

Ответ: Используйте CSS

background-image свойство

Вы можете просто использовать свойство CSS background-image в сочетании с псевдоклассом : hover для замены или изменения изображения при наведении курсора мыши.

Давайте попробуем следующий пример, чтобы понять, как это в основном работает:

  




<стиль>
    . карта {
        ширина: 130 пикселей;
        высота: 195 пикселей;
        фон: url ("images / card-back.jpg") no-repeat;
        дисплей: встроенный блок;
    }
    .card: hover {
        фон: url ("images / card-front.jpg") no-repeat;
    }



    
 
 
  

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

  




<стиль>
    .карта {
        ширина: 130 пикселей;
        высота: 195 пикселей;
        положение: относительное;
        дисплей: встроенный блок;
    }
    .card .img-top {
        дисплей: нет;
        позиция: абсолютная;
        верх: 0;
        слева: 0;
        z-индекс: 99;
    }
    . card: hover .img-top {
        дисплей: встроенный;
    }



    

        
        
    

  

Связанные часто задаваемые вопросы

Вот еще несколько часто задаваемых вопросов по этой теме:

Изменить фоновое изображение при наведении с эффектом затухания HTML CSS

Изменить фоновое изображение при наведении с эффектом затухания HTML CSS — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил
1 год, 4 мес назад

Просмотрено
613 раз

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

  .kid {
максимальная ширина: 50%;
положение: относительное;
}

.kid img {
дисплей: блок;
непрозрачность: 1;
высота: авто;
переход: легкость .6s;
ширина: 100%;
позиция: абсолютная;
z-индекс: 12;
}
.kid img: hover {
непрозрачность: 0;
}
.kid img + img {
дисплей: блок;
непрозрачность: 1;
положение: относительное;
z-индекс: 10;
}  

Здесь это делается путем помещения изображения в html-код. Мне нужно сделать это в css в качестве фонового изображения, потому что я сделал галерею с двумя столбцами (ширина 50% и 100vh), и это не работает с .

Вот мой код. Помогите получить тот же эффект, что и в первой скрипке.

  кузов {
  маржа: 0 авто;
  ширина: 100%;
  высота: 100vh
}
. оставил{
  плыть налево;
}
.верно{
  плавать: вправо
}

.col-half-width {
  ширина: 50%;
  высота: 100вх;
}

.project-01 {
  фон: #ccc url ('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') центральный центр без повтора;
  размер фона: обложка;

  }

.project-02 {
  фон: url ('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') центральный центр без повтора;
  размер фона: обложка;
}
.проект-01,
.project-02 img {
  максимальная ширина: 100%;
}  

mplungjan

13k2525 золотых знаков152152 серебряных знака209209 бронзовых знаков

Создан 10 фев.

1

Попробуйте использовать CSS : hover и transition . Примечание: возможно, вам следует предварительно загрузить изображение, чтобы оно работало плавно и с первого раза.

  кузов {
  маржа: 0 авто;
  ширина: 100%;
  высота: 100vh
}
.оставил{
  плыть налево;
}
.верно{
  плавать: вправо
}

.col-half-width {
  ширина: 50%;
  высота: 100вх;
}

.project-01 {
  фон: #ccc url ('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') центральный центр без повтора;
  размер фона: обложка;
  переход: 0.5 с;

  }

.project-01: hover {
  фон: url ('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') центральный центр без повтора;
  размер фона: обложка;
}
.project-01,
.project-02 img {
  максимальная ширина: 100%;
}  

Создан 10 фев.

Павел

74611 серебряный знак1414 бронзовых знаков

0

CSS свойство background-image не анимируется:
https: // разработчик. mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Я считаю, что вам придется сделать что-то гораздо более обременительное. Мы можем использовать непрозрачность вложенного позиционированного объекта, чтобы получить желаемый эффект. Для любого другого содержимого в родительском div потребуется значение z-index выше, чем у анимированного фона.

  кузов {
  маржа: 0 авто;
  ширина: 100%;
  высота: 100vh
}

.оставил {
  плыть налево;
}

.верно {
  плавать: вправо
}

.col-half-width {
  ширина: 50%;
  высота: 100вх;
}

.project-01 {
  фон: #ccc url ('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') центральный центр без повтора;
  размер фона: обложка;
  дисплей: встроенный блок;
  положение: относительное;
}

div.innerAnimate {
  фон: url ('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') центральный центр без повтора;
  размер фона: обложка;
  позиция: абсолютная;
  верх: 0;
  слева: 0;
  справа: 0;
  внизу: 0;
  непрозрачность: 0;
  z-индекс: 0;
  переход: 0. 5 с;
}

.project-01: hover div.innerAnimate {
  непрозрачность: 1;
}

.project-01,
.project-02 img {
  максимальная ширина: 100%;
}

div.innerContent {
  цвет белый;
  отступ: 20pt;
  положение: относительное;
  z-индекс: 100;
}  

  

  
 
  

    
 Мое содержание здесь. 
  
  

Создан 10 фев.

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

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

CSS-эффекты наведения изображения

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

Создание эффекта наведения изображения (эффекты наведения)

Следующий код показывает, как показать эффект наведения на Box Shadow.

Исходный код

Наведите указатель мыши сюда

Эффекты наведения изображения (переворачивание изображений)

Следующий код CSS показывает, как представить эффекты наведения курсора на изображение.

Наведите указатель мыши на изображение.

Исходный код

Подробнее о CSS Shadow …. Примеры CSS Shadow

CSS Прозрачность / прозрачность изображения

Непрозрачность — противоположность прозрачности, не пропускающая свет. Вы можете создавать прозрачные изображения в CSS с помощью свойства opacity.

CSS Эффект затухания изображения

Эффект размытия изображения

img
{
непрозрачность: 0.3;
}

Подробнее о …. Как сделать прозрачные фоновые изображения

Создание прозрачных / непрозрачных изображений — эффект наведения курсора

Следующая программа CSS показывает, как применить непрозрачность к изображению при наведении курсора мыши. Когда вы наводите указатель мыши на изображение, вы видите, что оно тускнеет.

Непрозрачность изображения при наведении

Наведите указатель мыши на изображение.

Исходный код

Наложение текста при наведении курсора на изображение

Наложение изображений друг на друга — отличный способ придать изображению новый вид.Здесь код CSS, отображающий текст на изображении при наведении курсора мыши

Наведите указатель мыши на изображение.

Тигр — самый крупный вид кошек, достигающий
общая длина тела до 3,3 м и весом до
до 306 кг. Его самая узнаваемая особенность — узор
темных вертикальных полос на рыжевато-оранжевом мехе
с более светлой нижней стороной.

Исходный код

Подробнее о наложении CSS …. Методы наложения CSS

Тигр — самый крупный вид кошек, достигающий
общая длина тела до 3-х.3 м и взвешивание
до 306 кг. Его самая узнаваемая особенность — узор
темных вертикальных полос на рыжевато-оранжевом мехе
с более светлой нижней стороной.

CSS замена изображения при наведении курсора — событие onmouseover

Следующий код CSS показывает, как изменить изображение при наведении курсора мыши. При наведении курсора мыши одно изображение, содержащее div, помещается поверх другого изображения.

Наведите указатель мыши на изображение.

Исходный код

Как полностью закрыть окно страницы…. CSS Полноэкранный оверлей

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

В следующем исходном коде показано, как изменить ссылку на изображение при наведении курсора мыши.

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

Исходный код

CSS Div Hover

Вы можете изменить цвет фона Div при наведении курсора. Следующий код CSS показывает, как изменить цвет фона div при наведении курсора.

Наведите указатель мыши на Div.
CSS Div эффекты зависания

Исходный код

Простой эффект наведения изображения, показывающий фоновое изображение.

http://sridharkatakam.com/simple-image-hover-effect-shows-background-image/ · GitHub

Простой эффект наведения изображения, который показывает фоновое изображение. http://sridharkatakam.com/simple-image-hover-effect-shows-background-image/ · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

	. слайд-изображение {
	фон: #fff url (images / play-btn.png) no-repeat 50% 50%;
	поплавок: левый;
	margin-right: 20 пикселей;
	нижнее поле: 10 пикселей;
	}
	.slide-img img {
	непрозрачность: 1;
	-webkit-transition: все.2с линейный;
	-моз-переход: все .2с линейные;
	-o-переход: все .2s линейные;
	переход: все . 2s линейные;
	}
	.slide-img img: hover {
	непрозрачность: 0,3;
	}

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

Увеличение фонового изображения при наведении курсора в Divi с 2 строками CSS

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

Это также очень легко сделать в Divi, используя всего 2 строки CSS.

Я видел другие руководства по этому вопросу, в которых требуется скопировать URL-адрес фонового изображения из медиа-менеджера и использовать псевдоэлементы до и после. Проблема с этим методом заключается в том, что если вам (или вашему клиенту) неудобно добавлять кучу CSS, тогда становится трудно изменить фоновое изображение.

Учебное пособие, которым я собираюсь поделиться с вами, чрезвычайно простое, быстрое и позволяет вам использовать опцию фонового изображения в Divi . Вам просто нужно добавить 3 строки CSS в переключатель Custom CSS на вкладке Advanced .

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

Шаг 1.

Добавьте фоновое изображение

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

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

Шаг 2. Добавьте CSS

Затем перейдите на вкладку Advanced в окне редактора и откройте переключатель Custom CSS .

Здесь мы собираемся добавить нашу магию CSS.

В поле «Главный элемент» активируйте параметры наведения , щелкнув значок курсора мыши.

На вкладке Desktop добавьте следующий CSS:

  размер фона: 100%;
переход: легкость всего 0,5 с;  

Мы хотим убедиться, что мы явно установили размер фона на 100% . Не стесняйтесь настраивать время перехода в зависимости от того, насколько быстро вы хотите, чтобы был эффект масштабирования.

В приведенном выше примере я установил значение 0,5 с , что составляет половину секунды.

После этого нам просто нужно указать, что должно происходить при наведении курсора. Щелкните вкладку Hover и добавьте следующий CSS:

  размер фона: 130%;  

Это, вероятно, не требует пояснений, но когда мы добавляем этот код на вкладку Hover, он сообщает Divi , что фоновое изображение должно увеличиться до размера 130% .

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

Заключение

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

Если у вас есть более простой способ добиться эффекта масштабирования фонового изображения в Divi, я хотел бы услышать об этом в комментариях!

Как всегда, удачных творений!

Присоединяйтесь к обсуждению

Есть что добавить к этому или вы хотите прокомментировать то, что упомянуто в статье? Зайдите на нашу официальную страницу в Facebook и присоединяйтесь к обсуждению!

Как изменить изображение при наведении курсора с помощью CSS?

Как изменить изображение при наведении с помощью CSS?

Подход этой статьи состоит в том, чтобы изменить изображение, когда пользователь наводит на него указатель мыши. Эту задачу можно просто выполнить, используя свойство CSS background-imag e в сочетании с псевдоклассом: hover для замены или изменения изображения при наведении курсора мыши.

Пример:

HTML

Вывод:

Перед наведением курсора мыши на изображение

над изображением:

Поддерживаемые браузеры перечислены ниже:

• Google Chrome
• Internet Explorer
• Firefox
• Opera
• Safari

Поменять местами фоновое изображение страницы при наведении курсора

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

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

Ловкость рук

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

Чтобы увидеть, как это работает, давайте рассмотрим действительно простой пример. Представьте, что у вас есть следующий код:

Довольно просто, правда? Просто изображение и тег привязки внутри одного и того же родителя. Представьте, что вы хотели сделать так, чтобы, когда пользователь наводил курсор на ссылку, вокруг изображения появлялась рамка.Как бы ты это сделал?

Начнем с основ. Мы знаем, как создать эффект наведения для привязки, и добавить границу достаточно просто:

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

К сожалению, это тоже не работает! Мы уже близко, но когда мы наводим курсор на ссылку, рамка все еще не появляется вокруг изображения. Что нам нужно, так это наш старый друг смежный родственный комбинатор .

С добавлением этого маленького «+» мы теперь нацелены на любой элемент изображения, который располагается сразу после тега привязки.Итак, если мы добавим еще несколько изображений в наш HTML, наведение курсора на нашу ссылку добавит границу к первому изображению.

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

Если раньше мы ориентировались только на соседних братьев и сестер, то теперь мы нацелены на всех старых братьев и сестер. Итак, теперь все изображения, которые находятся на том же уровне дерева DOM, что и наша привязка, получат границу в результате наведения.

Изменение вашего мышления

«Не сдавайся! Образование - это эксперимент ».

Обратите внимание, что для того, чтобы этот метод работал, элементы, с которыми мы возимся, должны быть тесно связаны с точки зрения дерева DOM. В частности, элемент, которым вы собираетесь манипулировать, должен быть родным или дочерним по отношению к элементу, на который вы хотите навести курсор.У вас не может быть удаленного зависания, которое требует возврата вверх по дереву DOM.

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

Для сегодняшнего примера мне потребовалось немало попыток, чтобы правильно структурировать мой HTML и CSS, чтобы все работало.С вашей точки зрения, это будет выглядеть очень просто, потому что я изложу все в правильном порядке. Просто помните, что когда вы делаете это в своих собственных проектах, вам придется много возиться и настраивать. Не сдавайся! Экспериментирование - это то место, где происходит образование.

Что мы строим

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

Демо: Щелкните здесь, чтобы запустить.

Итак, если бы это все, что мы делали, HTML был бы довольно простым. Один большой div с фоновым изображением, который содержит более узкий div с белым фоном и неупорядоченным списком внутри. Однако мы хотим немного усложнить ситуацию. Когда пользователь наводит курсор на ссылку навигации, фоновое изображение должно измениться.

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

Шаг 1:

HTML

Для нашего HTML нам понадобится контейнер - неупорядоченный список внутри элемента nav, который заключен в контейнер div. Вот основная структура:

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

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

Это наша завершенная структура HTML. Обратите внимание на плавающее в конце изображение само по себе, оно будет служить фоном для страницы, когда ни один якорь не наведен.

Шаг 2:

Стартовый CSS

Мы все закончили с HTML, остальная часть проекта - это CSS. Начнем с этих основных стилей, которые действительно не требуют объяснений. Не стесняйтесь использовать более надежный сброс, если у вас есть предпочтительный метод:

Шаг 3:

Стили контейнеров

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

Наконец, я установил границы контейнера, центрировал его и бросил в тень. Вот фрагмент кода, который все это делает:

А теперь самое сложное. Нам нужно заставить эти изображения делать то, что мы хотим. Во-первых, я настроил их всех так, чтобы они идеально совпадали с контейнером (изображения также имеют размер 800 на 500 пикселей), используя абсолютное позиционирование и обнуляя значения. Затем я сдвинул только изображения, которые были внутри элемента списка, за пределы контейнера, сдвинув их вправо. Теперь они будут скрыты, пока мы не вернем их.

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

Шаг 4:

Стили навигации

На этом последнем шаге наш контейнер и его изображения стилизованы и готовы к работе. Вот как выглядит эта страница в настоящее время:

Как видите, навигация по-прежнему довольно уродливая, поэтому нам нужно привести ее в порядок. Для этого мы устанавливаем ширину всего 170 пикселей, а фон - белым.

Это гарантирует, что у нас есть та левая белая полоса, которую мы хотим.Теперь приступим к стилизации текста и списка. Нам нужно настроить таргетинг на h2 и ul, а затем применить базовый стиль:

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

Учитывая способ, которым структурирован наш документ, мы не можем слишком много перемещаться по этому навигационному элементу или неупорядоченному списку.В результате нам нужно специально настроить таргетинг на первый элемент списка, чтобы мы могли подтолкнуть текст на место. Это достигается с помощью nth-child (только IE9 и выше, используйте selectivizr для старых браузеров).

Шаг 5:

Стили наведения

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

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

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

Увидеть в действии

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

Демо: Щелкните здесь, чтобы запустить.

Иди, собери что-нибудь

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

.