javascript - Efect de mărire la trecerea mouse-ului folosind Object-Fit: Cover

Scopul meu este să obțin un efect de mărire atunci când un utilizator trece cursorul peste o imagine de pe pagina mea. Am găsit un cod care are acest efect;

.transition {
    -webkit-transform: scale(1.6); 
    -moz-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
}
#content {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
}

Adăugarea tranziției la conținut atunci când utilizatorul trece mouse-ul peste imagine.

Problema pe care o am este utilizarea acestei tehnici combinată cu object-fit: cover. Vreau ca imaginea să se potrivească într-o cutie de dimensiune fixă (Înălțime: 250px; Lățime: 25%), menținând în același timp raportul de aspect (ceea ce se realizează folosind object-fit: cover).

Dar, atunci când un utilizator trece cursorul peste o imagine cu object-fit: cover, aceasta revine la vechea sa proporție, face zoom, și apoi revine la proporția corectă. Acest lucru duce la anumite efecte vizuale foarte ciudate, care pot fi văzute în următorul exemplu;

http://jsfiddle.net/y4yAP/982/

Îndepărtarea proprietății object-fit: cover de pe #content va rezolva problema cu zoom-ul, dar va distorsiona raportul de aspect.

Vreo idee cum să repar asta?

Răspuns #1

object-fit:cover nu este foarte bine suportat și nu sunt foarte familiarizat cu el, nu știu dacă ești obligat să îl folosești, dar am încercat ceva cu care sunt mai familiarizat.

Dacă toate imaginile sunt „peisaj”, atunci poți folosi width: 100% și height: auto și CSS-ul va menține raportul de aspect pentru tine. Pentru a poziționa imaginile centrate în container, am aplicat position: relative containerului și position: absolute elementului #content. Vezi: https://css-tricks.com/almanac/properties/p/position/

Pentru zoom poți folosi pur și simplu #content:hover { ... } în CSS-ul tău (cu excepția cazului în care ai nevoie de jQuery pentru alte scopuri).

HTML :

<div id="imageDiv">
    <img id="content" src="http://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png" />
</div>

CSS :

#content:hover {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1.6); 
    -moz-transform: translateX(-50%) translateY(-50%) scale(1.6);
    -o-transform: translateX(-50%) translateY(-50%) scale(1.6);
    transform: translateX(-50%) translateY(-50%) scale(1.6);
}

#content {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
}

#content {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#imageDiv { 
    position: relative;
    height: 250px;
    width: 450px;
    overflow: hidden;
}

FIDDLE (fără js): http://jsfiddle.net/pqs4vef7/2/

Răspunsul #2

Vă rugăm să verificați tot ce trebuie să faceți este să schimbați lățimea în „max-width” și să eliminați object-fit: