0%
Затемнение с эффектом увеличения при наведении мыши

Модификации Затемнение с эффектом увеличения при наведении мыши

позволит сделать вложенную картинку с затемнением и при наведении добавит эффект увеличение
  • Автор темы Автор темы xdeep
  • Дата начала Дата начала

Кто просматривает?

Недавно заходили [0]

Всего просматривают: 0 (пользователей: 0, гостей: 0)

Лучший пост по количеству реакций [ 1]

xdeep
Посмотреть вложение 11013

Все картинки в статье с таким расстоянием, что первая в статье, что последующие все, я ваш последний код добавил, там margin: 0; и ни чего
киньте мне ссылку в ЛС эту страницу, я посмотрю, так быстрее будет решить проблему

xdeep

Знаток

Персонал форума
Администратор
Репутация: 100%
Регистрация
06.02.2025
Сообщения
3,294
Основные моменты
2
Решения
15
Реакции
1,904
Баллы
113
Инициатор темы
  • Инструктор
  • Автор темы
  • Администратор
  • Модератор
  • Персонал форума
  • #1
xdeep разместил(а) новый ресурс:

Затемнение с эффектом увеличения при наведении мыши - позволит сделать вложенную картинку с затемнением и при наведении добавит эффект увеличение

Описание:
Модификация позволит сделать вложенную картинку с затемнением и при наведении увеличение
Кому интересно такое, ниже код, который нужно добавить в extra.less или сделать модификацию (что предпочтительнее)

Как выглядит:
Посмотреть вложение 11005

При наведении мыши:
Посмотреть вложение 11006

Less:
.message-content .bbImageWrapper,.resourceBody...

Посмотреть страницу этого ресурса...
 
Интересная штуковина, только углы закруглённые слева, а справа нэт. Подскажите плиз как поправить?
Как раз думал, как углы скруглить на картинках, и вы тут с модом, прям подфартило, однако.

2025-10-23_16-59-13.png
 
Сам нашёл и исправил, ведь проще написать и попросить помощи чем самому подумать, это было не трудно догадатся, где закруглить.

2025-10-23_17-03-54.png
 
2025-10-23_17-07-20.png

Правда когда картинка увеличивается, справа углы не закругленные как слева. Вот здесь я точно не знаю как исправить. И ещё интересный момент, когда не на картинку наводишь, а рядом с ней, она также увеличивается.
 
  • Инструктор
  • Автор темы
  • Администратор
  • Модератор
  • Персонал форума
  • #5
Посмотреть вложение 11009

Правда когда картинка увеличивается, справа углы не закругленные как слева. Вот здесь я точно не знаю как исправить. И ещё интересный момент, когда не на картинку наводишь, а рядом с ней, она также увеличивается.
посмотрю, позже опишусь
 
  • Инструктор
  • Автор темы
  • Администратор
  • Модератор
  • Персонал форума
  • #6
Посмотреть вложение 11009

Правда когда картинка увеличивается, справа углы не закругленные как слева. Вот здесь я точно не знаю как исправить. И ещё интересный момент, когда не на картинку наводишь, а рядом с ней, она также увеличивается.
поправил, копируйте и замените полностью
 
Ещё один момент:
  • Картинки все по центру, указываю left где до этого работало и картинка перемещалась влево, сейчас всё застыло по середине и не работает.
  • Как уменьшить расстояние между контентом и картинкой, оно большое. В коде смотрел и не нашёл ни чего.
2025-10-23_17-30-03.png
 
  • Инструктор
  • Автор темы
  • Администратор
  • Модератор
  • Персонал форума
  • #8
Ещё один момент:
  • Картинки все по центру, указываю left где до этого работало и картинка перемещалась влево, сейчас всё застыло по середине и не работает.
  • Как уменьшить расстояние между контентом и картинкой, оно большое. В коде смотрел и не нашёл ни чего.
Посмотреть вложение 11010
замените margin: 1em auto; на margin: 0;
 
  • Инструктор
  • Автор темы
  • Администратор
  • Модератор
  • Персонал форума
  • #10
попробуйте так. я тестирую, все работает

Less:
.message-content .bbImageWrapper,
.resourceBody .bbImageWrapper,
.resource-header-shot {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    border-radius: 15px;
    margin: 0;
}

.message-content .bbImage,
.resourceBody .bbImage,
.resource-header-shot img {
    display: block;
    max-width: 100%;
    height: auto;
    filter: saturate(.4) contrast(.96);
    transition: filter .3s ease, transform .3s ease;
    will-change: filter, transform;
    transform: translateZ(0);
}

.message-content .bbImageWrapper:hover > .bbImage,
.resourceBody .bbImageWrapper:hover > .bbImage,
.resource-header-shot:hover img {
    filter: none;
    transform: scale(1.06);
}

.bbImageWrapper {
    width: fit-content;
}
 
  • Инструктор
  • Автор темы
  • Администратор
  • Модератор
  • Персонал форума
  • #12
я же написал,что нужно заменить весь margin на ноль
именно так margin: 0;
 
2025-10-23_17-47-59.png

Все картинки в статье с таким расстоянием, что первая в статье, что последующие все, я ваш последний код добавил, там margin: 0; и ни чего
 
  • Инструктор
  • Автор темы
  • Администратор
  • Модератор
  • Персонал форума
  • #14
Посмотреть вложение 11013

Все картинки в статье с таким расстоянием, что первая в статье, что последующие все, я ваш последний код добавил, там margin: 0; и ни чего
киньте мне ссылку в ЛС эту страницу, я посмотрю, так быстрее будет решить проблему
 
Похожие темы Часто смотрят Посмотреть ещё
Назад
Верх Низ