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

[xdeep]

xdeep разместил(а) новый ресурс:

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

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

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

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

.message-content .bbImageWrapper,.resourceBody...

Посмотреть страницу этого ресурса...

 

Модификации  Случайный фразы для Хеллоуин

Модификации  Анимированная новогодняя гирлянда

[Stiksar]

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

 

[Stiksar]

Сам нашёл и исправил, ведь проще написать и попросить помощи чем самому подумать, это было не трудно догадатся, где закруглить.

 

[Stiksar]

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

 

[xdeep]

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

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

посмотрю, позже опишусь

 

[xdeep]

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

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

поправил, копируйте и замените полностью

 

[Stiksar]

Ещё один момент:

• Картинки все по центру, указываю left где до этого работало и картинка перемещалась влево, сейчас всё застыло по середине и не работает.
• Как уменьшить расстояние между контентом и картинкой, оно большое. В коде смотрел и не нашёл ни чего.

 

[xdeep]

Ещё один момент:

• Картинки все по центру, указываю left где до этого работало и картинка перемещалась влево, сейчас всё застыло по середине и не работает.
• Как уменьшить расстояние между контентом и картинкой, оно большое. В коде смотрел и не нашёл ни чего.

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

замените margin: 1em auto; на margin: 0;

 

[Stiksar]

замените margin: 1em auto; на margin: 0;

я пробовал, не работает.

 

[xdeep]

попробуйте так. я тестирую, все работает

.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;
}

 

[Stiksar]

Убрал auto и картинка влево съехала как нужно, но вот расстояние также велико

 

[xdeep]

я же написал,что нужно заменить весь margin на ноль
именно так margin: 0;

 

[Stiksar]

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

 

[xdeep]

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

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

киньте мне ссылку в ЛС эту страницу, я посмотрю, так быстрее будет решить проблему