Как убрать затемнение с изображения «при наведении»?
Друзья может кто использовал тему от yootheme?
В двух словах есть "иконка" которая появляется при наведении, помимо этого идет затемнение фона, и вот в чем вопрос, как сделать так чтоб затемнение не касалось этой иконки?
Пример 1 это то что они распространяют в своих виджетах, и то как получается у меня в шаблоне
spoiler
и то как получается у меня в шаблоне spoiler
прикладываю белый svg spoiler
т.е. крестик под фоном у меня, а у них он над фоном, хочу сделать как у них. В настройках темы нашел "силу затемнения" и цвет, но вот как "поднять" слой не понимаю. Если кто-то в курсе как это сделать скажите пожалуйста
Дополнительно:
Подымите z-index-ом вашу иконку повыше.
Поясню вот код, допустим как пример,
.tm-logo { position: absolute; z-index: 9999; } |
.tm-logo { position: absolute; z-index: 9999; }
Но у меня не .tm-logo, а что? Как называется наложенное изображение?
Как я понял нужно свои правки внести через пользовательские css, но может в самой теме в настройках это делается?
Если она выполнена отдельным тегом, то вам повезло, вы можете задать ей отдельный стиль с z-index-ом.
Если и изображение, и иконка нарисованы на канвасе, тогда, то тогда либо искать настройку, либо пытаться разобраться в архитектуре модуля, чтобы внести свои правки, не предусмотренные документацией к этому модулю.
spoiler
.el-hover-image { z-index: 1 } |
.el-hover-image { z-index: 1 }
Крестик сверху, но вопрос может это редактируется в настройках темы? Где по идее это может находится? spoiler
Ответы:
Технически вам нужно сделать 3 слоя
Верхний слой с крестом, под ним див с заливкой серым и полу-прозрачностью, снизу фото. Все это анимировать по наведению мыши
- Это все предусмотрено темой, только нужно именно поднять этот слой
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы убрать затемнение с изображения при наведении на них курсора, можно использовать CSS. Для этого нужно добавить стиль для элементов, которые содержат изображения.
Приведу пример для случая, когда изображения находятся внутри тега![]()
:
```html
img {
filter: brightness(100%);
transition: filter 0.3s;
}
img:hover {
filter: brightness(70%);
}
```
В данном примере мы устанавливаем начальное значение яркости изображения (100%) и добавляем плавный переход при изменении значения яркости при наведении курсора на изображение.
Таким образом, при наведении на изображение оно будет затемнено до 70%, а когда курсор уберут, вернется к обычной яркости.
Вы можете настроить значение яркости и скорость перехода в зависимости от ваших предпочтений.