Есть сайт на Wordpress с плагином Woocommerce. Верстаю дизайн для него. В дизайне присутствует меню навигации слева, где расположены категории товаров. При наведении на некоторые категории - выпадает выдающее меню, где расположены подкатегории этой категории.
Для красоты используются миниатюры категорий. Наглядно видно на данном скриншоте:
Нажмите для увеличения
На пункте "Насосы циркуляционные" стоит курсор - фон миниатюры становится оранжевым, а само изображение должны становится белым. В этом и кроется моя проблема - я не знаю, как это реализовать. Woocommerce поддерживает загрузку только одной миниатюры для каждой категории, т.е. я могу загрузить либо миниатюру с серым изображением, либо с чёрным.
Пробовал использовать SVG - ничего хорошего не вышло... Не понимаю, как его правильно вставить. У меня есть такая ссылка на SVG: http://domain[dot]ru/wp-content/i-ta[dot][dot][dot]lee/kartinka[dot]svg - если вставить её с помощью <img> или background - возможности менять её цвет у меня не будет, т.е. нужно вставить именно сам XML код SVG. Как это сделать правильно? Я пробовал вставлять через php функцию include - почему-то ничего не вышло... Как будто-бы php не может открыть SVG файл.
Также пробовал в одном PNG файле объединять обе картинки - серую и белую. Ставить их рядом с друг другом, чтобы затем можно было с помощью background-position просто менять их местами. Однако, возникает проблема. В меню эти картинки должны иметь один размер - 45x45 пикселей. Но также они используются и внутри сайта, где их размер составляет, к примеру, 250x250 пикселей. Чтобы трюк c background-position удался, на сколько мне известно, картинка обязательно должна соответствовать нужному размеру. В итоге, я загружаю картинку размером 250х250 - она сохраняется под таким размером. Пытаюсь использовать её в меню - она слишком большая, уменьшаю её с помощью background-size до 45 пикселей. Но она уменьшается полностью, т.е. в итоге в меню у меня отображается сразу 2 картинки - и серая, и белая. А нужно, чтобы отображалась только одна и при наведении менялся background-position.
Подскажите, пожалуйста, как мне это правильно будет реализовать?
Надеюсь, я всё понятно объяснил. Если нет, попытаюсь объяснить по-другому. Просто весь день уже над этим колдую, мозг уже вскипел и не варит особо...
Буду очень благодарен за помощь!
--------------------------------------------------------------------
(Добавление)
Тьфу!
Сразу как написал - пришла гениальная идея.
Раз картинка размером 45х45 px должна отображаться, а в склееном виде её размеры 90x45 px, то я указал в background-size: 90px 45px; - всё заработало
