Bonjour,

J'ai 2 images la première effectue un transform: scale; lors du passage de la souris et la seconde ne doit pas s’agrandir en même temps.

J'ai un peu tout essayé, div/img, inherit, none etc.

Voici mon code:

<div class="image1">
     <img src="monimage.png" />
</div>

.actuImg {
    background-image: url("../img/actu/oeil.png");
    max-width: 320px;
    height: 180px;
    transition-timing-function: ease-in-out;
    transition-duration: .15s;
    transition-property: -webkit-transform, transform, filter, -webkit-filter, -moz-filter, -o-filter, -ms-filter;
}


.actuImg:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    filter: brightness(55%);
    -webkit-filter: brightness(55%);
    -moz-filter: brightness(55%);
    -o-filter: brightness(55%);
    -ms-filter: brightness(55%);
}

.actuImg:hover img{
    -webkit-transform: none;
    transform: none;
    filter: none;
    -webkit-filter: none;
    -moz-filter: none;
    -o-filter: none;
    -ms-filter: none;
}

-
Edité par Falcom34 24 mai 2018 à 15:50:55

Bonjour,

Pas sûr de voir ce que tu cherches ;

qqchose comme ça?:

http://jsbin.com/koxacit/2/edit?html,css,output