background-transition con background-size: cover

Question

Questo potrebbe essere già una risposta da qualche parte, ma non ho ancora trovato dopo un po 'di ricerca.

Ho una serie di div con immagini di sfondo. La dimensione è impostata su sfondo: copertina.

Ma voglio essere in grado di ingrandire e ingrandire le immagini al passaggio del mouse. Questa transizione non funziona con l'attributo cover che sembra. In realtà, l'immagine si ingrandisce ma senza l'effetto di transizione. Passa istantaneamente da "copertura" a, in questo caso, al 110%. Funziona bene quando la dimensione dello sfondo originale era impostata al 100%.

Ma con questo, sul ridimensionamento della pagina l'immagine sembra affiorare un po 'dietro il div, che non è quello che voglio. La copertina la tiene sempre al centro, quello che voglio.

Qualsiasi consiglio è apprezzato su come avere una transizione man mano che cresce con copertina o lo stesso effetto.

Ilmiont

Answer 1

Non è possibile utilizzare parole chiave (come la copertina) quando si utilizza le animazioni CSS per lo sfondo-size.

Maggiori informazioni qui: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

testo Rilevante:

background-size - sì, come una lista ripetibile di un semplice elenco di un lunghezza, percentuale o calc(); quando entrambi i valori sono lunghezze, sono interpolati come lunghezze; quando entrambi i valori sono percentuali, sono interpolati come percentuali; in caso contrario, entrambi i valori vengono convertiti in una funzione calc() che è la somma di una lunghezza e una percentuale (ogni eventualmente zero) e queste funzioni calc() hanno ciascuna metà interpolata come numeri reali . . Ciò significa che i valori delle parole chiave non sono animabili.

Un approccio per ottenere questo effetto è posizionare un elemento con l'immagine di sfondo in un elemento di avvolgimento con overflow nascosto e applicare una trasformazione di scala.

.wrapper { 
 
    width:300px; 
 
    height:400px; 
 
    overflow:hidden; 
 
} 
 
.image { 
 
    background:url("http://placekitten.com/g/500/500"); 
 
    background-size:cover; 
 
    width:100%; 
 
    height:100%; 
 
    transition: transform 2s; 
 
} 
 

 
.image:hover { transform:scale(1.1) }

<div class="wrapper"> 
 
    <div class="image"></div> 
 
</div>