Не работает уменьшение картинки transform?

Question

[lada95]

.partner__logo{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    overflow: hidden;
}

.partner__logo:hover img{
    opacity: .3;
    transform: scale(.9);
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
}

https://lair-35.ru/nashi-partnyoryi

Comments

[Lynn «Кофеман»]

Оффтоп: саойства без префикса надо писать после префиксных

Answer 1

[Odisseya]

Повесим hover-событие на родителя — в single.css замените селектор .partner__logo:hover на .partner__inner:hover .partner__logo , чтоб стало:

.partner__inner:hover .partner__logo {
    opacity: .3;
    transform: scale(.9);
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
}

Comments

[lada95]

Спасибо

Answer 2

[Алексей Скляров]

Ну хотя бы потому, что у вас в .partner__logo нет картинки вложенной, у вас сама картинка с классом .partner__logo. Это первое. Второе что может произойти - перекрытие вашим блоком с описанием. Для этого нужно ему в неактивном состоянии задать pointer-events:none; , в активном состоянииpointer-events:all;

Comments

[lada95]

Убрать img из .partner__logo? pointer-events в какой класс? До этого просто все и так работало

[Алексей Скляров]

lada95, да, должно быть просто .partner__logo:hover По поводу pointer-events его нужно добавлять на .partner__description, но не факт что понадобится.

[lada95]

Алексей Скляров, не работает так тоже

[Алексей Скляров]

lada95, кеш обновите, у меня все на вашем сайте работает

[tarthur]

lada95,
partner__inner:hover .partner__logo {
opacity: .3;
transform: scale(.9);
-webkit-transform: scale(.9);
-moz-transform: scale(.9);
}