Transformation: Skala (n); - Anders bei Mausklick als bei Mausklick

Question

Ich benutze transform: scale(); auf einer Website. Ich hoffe, dass jemand mir mit einer Frage helfen kann, die ich nicht lösen konnte, indem ich im Netz suche.

Hier ist mein Code: HTML:

<div class="hopp_circle_img"> 
    <img src="..." alt="" /> 
</div> 

CSS:

.hopp_circle_img { 
    position: relative; 
    width: 100% !important; 
    height: 100% !important; 
    max-width: 100% !important; 
    max-height: 100% !important; 
    overflow: hidden; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    z-index: 0; 
} 
.hopp_circle_img img { 
    -webkit-transition: transform 0.15s; 
    transition: transform 0.15s; 
} 
.hopp_circle_img img:hover { 
    display: block; 
    z-index: 100; 
    -webkit-transform: scale(1.25); 
    transform: scale(1.25); 
} 

Das funktioniert gut, aber ich wurde gebeten, die Wirkung anders zu machen, wenn die courser in sich bewegt, als wenn es zieht aus. Z.B. schnell skalieren bei Mouse-In, aber langsam bei Mouse-Out. Gibt es dafür eine Lösung in CSS3 oder in Javascript?

Danke rabox

Answer 1

Stellen Sie eine der langsame Übergang auf das Element (.hopp_circle_img img) und dem schnellen Übergang auf das Element, während es (.hopp_circle_img img:hover) schwebte hat. Wenn Sie also das Element verlassen, wird der langsamere Übergang wirksam.

Ich habe die transition shorthand property mit unterschiedlicher Dauer eingestellt und Lockerung, aber man kann nur transition-duration oder transition-delay oder eine andere transition-timing-function (easing) gesetzt ändern.

.hopp_circle_img { 
 
    position: relative; 
 
    width: 100% !important; 
 
    height: 100% !important; 
 
    max-width: 100% !important; 
 
    max-height: 100% !important; 
 
    overflow: hidden; 
 
    -webkit-border-radius: 50%; 
 
    border-radius: 50%; 
 
    z-index: 0; 
 
} 
 
.hopp_circle_img img { 
 
    -webkit-transition: transform 0.5s ease-out; 
 
    transition: transform 0.5s ease-out; 
 
} 
 
.hopp_circle_img img:hover { 
 
    display: block; 
 
    z-index: 100; 
 
    -webkit-transform: scale(1.25); 
 
    transform: scale(1.25); 
 
    -webkit-transition: transform 0.15s; 
 
    transition: transform 0.15s; 
 
}

<div class="hopp_circle_img"> 
 
    <img src="https://65.media.tumblr.com/avatar_39c12973e9fe_128.png" alt="" /> 
 
</div>

Answer 2

Sorry, entschlossen auf meinem eigenen das Thema, das ich direkt nach der Einlieferung. Es muss eine andere Übergangszeit sein: hover. z.B.

.hopp_circle_img img { 
    -webkit-transition: transform 0.15s; 
    transition: transform 0.15s; 
} 
.hopp_circle_img img:hover { 
    display: block; 
    z-index: 100; 
    -webkit-transform: scale(1.25); 
    transform: scale(1.25); 
    -webkit-transition: transform 2s; 
    transition: transform 2s; 

}

}