Вы можете изменить изображение при наведении CSS. В этом примере я сделаю это в два этапа. На первом этапе я помещу изображение поверх другого. Наконец, на втором этапе я буду использовать событие hover и свойство opacity, чтобы скрыть и показать изображение.
Наведите указатель мыши на изображение ниже, чтобы увидеть конечный продукт, который мы собираемся построить.
Давайте посмотрим, как можно менять изображения при наведении.
Изменение изображения при наведении с помощью CSS
Шаг 1: наложите/разместите изображение поверх другого
Прежде чем писать CSS, важно увидеть мою HTML-разметку. Так вы лучше поймете, как это работает.
У меня есть следующая HTML-разметка, как вы видите ниже.
<дел>
<дел>
<дел>
Как вы видите в приведенном выше HTML-коде, у меня есть контейнер div с классом CSS «change-img-hover». Я вставил изображения в два разных блока div, чтобы легко ориентироваться на них в своем CSS. Это означает, что я поместил два изображения в два блока div с классами img-normal и img-hover соответственно. Но вы можете изменить любое из этих имен классов.
Чтобы разместить второе изображение поверх первого изображения, у меня есть следующий CSS ниже.
Как вы видите в этом CSS, я позиционировал относительно как контейнер div (.change-img-hover), так и первый div контейнера изображения (.img-normal). И я поставил совсем второй контейнер изображений (.img-hover). Чтобы узнать больше об этом, посмотрите, как работает позиция CSS. Это исчерпывающее руководство, которое стоит прочитать.
Так или иначе, я смог разместить второе изображение поверх первого. Теперь я готов изменить изображение при наведении.
Шаг 2: Смена изображений при наведении и отпускании мыши
Чтобы изначально скрыть второе (верхнее) изображение, я использовал для него « opacity: 0 ». Так что верхнее изображение нам не видно.
Я также написал еще одну строку CSS, которая вносит изменения в свойство непрозрачности при наведении курсора и выходе из мыши. Я хочу, если кто-то наведет курсор на « .change-img-hover », непрозрачность для div « .img-hover » превратится в « 1 ». Для этого у меня есть следующий CSS:
Вот и все! Теперь, если вы наведете курсор на изображение, появится верхнее изображение, и его непрозрачность изменится с нуля на единицу. И если вы оставите свою мышь, ее непрозрачность снова вернется к 0 с 1.
Вот как это работает.
Но, как вы могли заметить, изображение сразу меняется, что выглядит не очень хорошо.
Поэтому я добавил к этому свойству «непрозрачности» небольшой эффект « переход ». При этом изображение меняется медленно и выглядит профессионально, как вы видели в моем живом примере (начало этого поста).
Если вы не уверены, посмотрите мой CSS перехода ниже.
Создание эффекта анимации при наведении изображения (только CSS).
Как повернуть текст и изображения с помощью CSS?
Поместите текст поверх изображения
Заключение
В этом посте вы узнали, как разместить изображение поверх другого и как изменить изображение при наведении. У меня есть максимальная ширина контейнера div 600px, но вам это не нужно. Я сделал это для того, чтобы изображение занимало меньше места в этом посте. В противном случае у него нет другой причины.
Если у вас есть какие-либо вопросы, дайте мне знать.
Шихаб Ул Хак
Можешь звать меня Шихаб. Я веб-разработчик и много работаю с PHP и WordPress. У меня есть степень магистра, и я оставил свою обычную работу, чтобы полностью посвятить себя области, в которой я люблю работать. Я живу в Бангладеш и помогаю владельцам бизнеса создавать потрясающее присутствие в Интернете.
Профиль автора »
Squarespace CSS: изменение изображения при наведении курсора (и добавление ссылки по клику, если необходимо) — Squarespace Web Design & SEO на уровне экспертов от Tiffany :: Пользовательские сайты Squarespace с SEO на уровне экспертов | Веб-дизайнер Squarespace | Квадратный SEO-эксперт | Дизайн веб-сайтов и услуги SEO | SEO-специалист Squarespace | Лучшие дизайнеры Squarespace
Подпишитесь на бесплатную пробную версию Squarespace здесь ! #афлинк
Это одна из моих любимых частей CSS. Я впервые столкнулся с этим из этого очень полезного видео, но когда мне также нужно было, чтобы изображения можно было щелкнуть при наведении, я подумал:
«Держу пари, другим людям нужен тот же самый эффект и функциональность, и они не знают, как это сделать». сделать так, чтобы это произошло».
Итак, это будет полное руководство о том, как добиться того и другого одновременно, если хотите, для приятной интерактивной функции на вашем сайте Squarespace.
Как только вы научитесь применять этот эффект — а это несложно, так что не волнуйтесь, — вы сможете проявить творческий подход к его использованию.
Итак, без лишних слов, вперед!
Вот пример того, что я имею в виду под
изменением изображений при наведении курсора мыши :
Для этого требуется три простых и понятных шага:
Загрузите оба изображения в пользовательские файлы CSS Скопируйте ссылку, сгенерированную для каждое изображение
Вставьте код в блок кода и вставьте ссылки на оба изображения
Вот и все!
Шаг 1. Загрузите оба изображения в пользовательские файлы CSS.
Загрузите два изображения, между которыми должен переключаться эффект.
Шаг 2. Получите URL для каждого изображения
В этом же окне «Управление пользовательскими файлами» щелкните имя файла каждого изображения по одному за раз. Ссылка автоматически появится в верхней части окна пользовательского CSS (вам, вероятно, придется немного прокрутить вверх, чтобы найти ее). Вы хотите выделить и вырезать эту ссылку (таким образом она будет удалена из вашего пользовательского CSS и одновременно скопирована в буфер обмена).
Теперь вставьте этот URL-адрес в блокнот (или в пустое электронное письмо, или куда вы хотите вставить его для безопасного хранения).
Повторите этот процесс для второго изображения, сгенерировав URL-адрес, щелкнув файл в «Управлении пользовательскими файлами», затем выделив URL-адрес, вырезав и вставив его в блокнот.
Теперь у вас в Блокноте должны быть две отдельные ссылки: одна для первого изображения и одна для второго.
Шаг 3 — Настройка блока кода
Перейдите туда, где вы хотите отобразить этот эффект на своем веб-сайте, и добавьте блок
Code .
Удалите
Hello, World!
из поля и вставьте следующий код:
Теперь перейдите в Блокнот или туда, куда вы вставили URL-адреса обоих изображений, и скопируйте URL первого изображения . Это изображение, которое должно отображаться перед любым взаимодействием с мышью, и то же самое изображение, которое снова появится после того, как произошло действие наведения и мышь переместилась в другое место.
В блоке кода замените два вхождения Первое изображение этой ссылкой. Не удаляйте другие символы, иначе ваш код не будет работать.
Теперь вы хотите повторить тот же процесс, но на этот раз скопируйте URL вашего второго изображения и замените слова Второе изображение с этим URL-адресом файла изображения. Ваше второе изображение — это изображение, которое вы хотите показать, когда мышь наводит курсор на исходное изображение.
Нажмите Применить , чтобы сохранить все, затем Сохранить страницу, которую вы редактировали. Если эффект не работает сразу, обновите страницу и повторите попытку. Если это все еще не работает, вернитесь и проверьте свою работу и убедитесь, что вы не удалили символ или что-то пропустили. Если у вас все еще возникают трудности, я рекомендую посмотреть это видео на YouTube, чтобы увидеть, как вышеупомянутые шаги выполняются в режиме реального времени.
хотите сделать изображения кликабельными?
Это еще проще — если вы хотите добавить ссылку для перехода по изображениям, снова откройте свой блок Code и добавьте следующий код в начало/верх кода, который мы только что закончили, добавив уникальный URL-адрес, на который должны ссылаться изображения:
Я вставил изображения в два разных блока div, чтобы легко ориентироваться на них в своем CSS. Это означает, что я поместил два изображения в два блока div с классами img-normal и img-hover соответственно. Но вы можете изменить любое из этих имен классов.
Это исчерпывающее руководство, которое стоит прочитать. 
Я живу в Бангладеш и помогаю владельцам бизнеса создавать потрясающее присутствие в Интернете.
сделать так, чтобы это произошло». 
Ваше второе изображение — это изображение, которое вы хотите показать, когда мышь наводит курсор на исходное изображение.
