Css замена изображения при наведении: Как сделать, чтобы картинка менялась при наведении на нее курсора мыши? — Независимое театральное объединение "Зрительские симпатии"

Использование CSS для замены содержимого изображением

от Ran Enoch – следите за новостями в Твиттере здесь

Часто бывают случаи, когда вы как разработчик или дизайнер предпочитаете использовать изображение, а не HTML-элемент для представления чего-либо, особенно если вы имеете дело с текстом. Использование изображения позволяет вам иметь больше разнообразия шрифтов и больше контроля над дизайном, но недостатком является то, что поисковые системы, такие как Google, не могут читать текст изображения. К счастью, есть небольшая хитрость, позволяющая обойти эту проблему: используя свойство CSS text-indent, вы можете скрыть HTML-текст, вставив изображение как часть фона.

Допустим, вы хотите попробовать это с логотипом. Вы начнете с текста, такого как этот тег h3:

<Просмотреть обычный текст>

HTML

CSSReset

Чтобы заменить текст изображением логотипа, используйте отрицательное значение отступа текста (оно должно быть довольно большим, как показано ниже) и вставьте изображение с помощью background: url().

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

< Просмотр обычного текста >

css

h3{
цвет: #fff;
отступ текста: -9999px;
фон: url(«cssreset.gif») без повтора;
ширина: 500 пикселей;
высота: 200 пикселей;
}

Самые популярные скрипты сброса CSS в 2021 году, все в одном месте

Бесплатный ресурс для веб-дизайнеров и разработчиков. На главной странице вы найдете наиболее популярные сценарии сброса CSS для копирования/вставки с документацией по каждому из них.

Последние руководства по CSS

— добавьте эффект наведения к изображениям продуктов на страницах коллекции

9.0002 ‎23.01.2020 11:06

Привет, TyW,

Спасибо за код. Я новичок в шоппинге и хочу применить эффект наведения в моем дебютном магазине тем.

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

Могу ли я попросить совета по этому поводу и есть ли какое-либо решение для этого? Изображения в первом ряду не имеют эффекта наведения, а во втором ряду есть.

Ждем вашего ответа.

Заранее спасибо!

88 407 просмотров

1 Нравиться

Отчет

‎01.03.2020 13:57

Привет Tyw

Спасибо за урок.

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

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

Я использую Бруклин.

Спасибо

Хосе Луис

84 709 просмотров

2 Нравится

Отчет

‎28. 03.2020 23:05

Я следовал этому пошагово на минимальную тему, и это не сработало…

81 738 просмотров

0 Нравится

Отчет

‎28.03.2020 23:13

Привет, TyW,

Спасибо за подробное описание кода.

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

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

Не могли бы вы помочь мне проверить, что не так?

81 737 просмотров

0 Нравится

Отчет

‎04-04-2020 00:15

Я точно следовал этому руководству и ничего не происходит. Это мой сайт.

Кто-нибудь еще сталкивался с неработающим эффектом наведения? Я использую тему Дебют.

80 806 просмотров

4 Нравится

Отчет

‎13. 04.2020 02:30

Здравствуйте, боюсь, это не сработало. Я ищу весь код, как вы показали, но они выглядят совсем по-другому. Эффект не применялся. Не могли бы вы помочь мне с применением кода. Спасибо.

79 622 просмотров

0 Нравится

Отчет

‎28.04.2020 23:18

Это работает, но только на первой странице из 20 продуктов… как я могу заставить это работать, если у меня больше страниц в коллекции из-за 20+ продуктов?

77 276 просмотров

1 Нравиться

Отчет

‎23.06.2020 06:23

Эй, TyW,

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

Здесь мы работаем с темой Brooklyn, и ваш туториал, похоже, не подходит — похоже, Brooklyn создал свой тег img немного иначе, чем показано в вашем туториале. Мы проделали некоторую работу, пытаясь проанализировать (💪🤓), однако, похоже, мы не можем понять это.

Вот что у нас получилось…

Бруклин, похоже, имеет 3 отдельных тега img в файле product-grid-item.liquid:

Строка 50

Строки 55-61

и строка 65

В процессе строка исключения 50 и строка 65 абсолютно ничего не сделали… Следовательно, не это.

Обертывание div (как указано) вокруг тега изображения (строки 55-61), однако, полностью сломало шаблон, больше не показывая никаких изображений. Следовательно, мы твердо верим, что это должен быть тот 😉

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

Использование CSS для замены содержимого изображением

CSSReset

— добавьте эффект наведения к изображениям продуктов на страницах коллекции

Добавить комментарий Отменить ответ