Решение: переверстать всё так, чтобы не ехало.
А не заставлять плоховидящего человека вглядываться в мелкий шрифт, запрещая увеличение шрифта или масштабирование.
В частности один из приемов:
html{
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
Если основной шрифт 16px.
Дальше размеры шрифта задавать в rem.
И не задавать фиксированную высоту блоков, т.е. все блоки проверять на переполнение.
Не нужно ничего вырезать в png.
Нужны линейные градиенты. Это пример для других целей, вам нужно только адаптировать, заменить прозрачность на полупрозрачность.
Потому что комментарии начинаются со слеша, а не со звездочки * Extra Small Devices, Phones */
А вообще это говорит о том, что надо перенастроить цветовую схему вашего редактора или сменить его.
Кажется я поняла, что вы хотите, так: https://jsfiddle.net/e3auf6h7/ ?
Если нужен еще и hover, то его просто в стилях пишете.
Если нужно, чтобы при клике не "гасли"остальные картинки, то уберите строчку про remove.
Подходящие! Для решения разных задач используются разные единицы измерения
примеры
1. Размер шрифта удобно писать в px, em и rem.
Если он фиксированный, то это px.
Если зависит от настроек пользователя, то rem. Для html задают font-size: 62.5%, для body font-size: 1.6rem в итоге для стандартных настроек получают изначальные 16px, но для удобства расчетов в этом случае 1rem=10px.
Если размер шрифта зависит от размера шрифта родителя, то используют em, например, заголовок должен быть в 1.2 раза крупнее текста. h1{font-size: 1.2em}
А может быть мне нужен адаптивный шрифт, чтобы на всех экранах слово занимало всю ширину, тогда vw vh
2. Границы. Обычно толщина границ не зависит от шрифта или размеров блоков, значит, px
border: 1px
3. Блоки.
У блоков могут быть разные зависимости.
Например, четверть родителя -> проценты %
Или фиксированная -> px
Или зависит от ширины/высоты вьюпорта -> vw vh
Или зависит от шрифта -> ch (Ширина символа 0 в шрифте текущего элемента.)
4. Отступы.
Могут зависеть от шрифта, могут быть % от ширины блока или фиксированными в px.
Это не все варианты, все мне, наверное, так сразу и не перечислить
Надо поменять местами ссылку и картинку в коде.
В CSS поменять их обратно через order, если надо.
Использовать CSS :hover https://jsfiddle.net/w3efugqk/
