javascript - toda - ¿Cómo puedo ampliar una imagen de fondo en un div con tamaño de fondo?

imagen de fondo html5 css3

Question

Quiero que un elemento div se extienda a lo ancho 33% con una imagen de fondo hecha en css

background-image:url(); background-size:cover 

¿Cómo puedo animar un acercamiento de la imagen del fondo en la división en mouseover o mouseneter, hay un complemento que puede hacer esto? El div fondo tiene que usar background-size: cover porque es una página elástica.

Aún no tengo un violín porque no sé dónde ni cómo empezar

Answer 1

Responda para aquellos que quieran hackear el cambio de transición de CSS para que se apliquen en el tamaño de fondo: cubrir;

- Si no es así, lea la segunda sección para ver las formas estándar de lograr ese efecto.

<div class="wrap">
    <div></div>
    <p>hello</p>
</div>


html, body {
    height: 100%;
}

div.wrap {
    height: 33%;
    width: 33%;
    overflow: hidden;
    position: relative;
}

div.wrap > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url(''http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg'');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

div.wrap:hover > div {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);    
}

Demo (usando background-size: cover; para hacer la transición / zoom del elemento)

Como usted dijo que la transición del tamaño de la cover es necesaria, se me ocurrió el truco que le había dicho anteriormente, aquí tengo un elemento hijo anidado debajo de la position: relative; elemento donde estoy teniendo el elemento hijo establecido en position: absolute; con background-image background-size tiene background-size establecido para cover y luego al hover el hover del elemento primario, acerco el elemento utilizando la transform: scale(2,2); propiedad.

Además, cuando se trabaja con esta solución, es crucial que tengamos que establecer el z-index de la position: absolute; Elemento más bajo que los elementos que colocará dentro, por lo que actuará como un background

Responde a aquellos que quieran ir limpios con HTML y CSS.

No puede animar un background-size si su valor es de cover por lo que necesitará px o % , o también puede usar una etiqueta img con transform: scale(2,2); propiedad.

Demo

Demo 2 (acercar o alejar desde el centro)

div {
    height: 200px;
    width: 200px;
    background: url(''http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg'');
    background-size: 100% 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

div:hover {
    background-size: 150% 150%;
}

Si quieres seguir con background-size: cover; de lo que tendrá que envolver todo el elemento dentro de un elemento de envoltura que tenga dimensiones fijas con overflow: hidden; y luego escalar el elemento hijo al hover elemento padre.

Como comentó, para un ejemplo de etiqueta img , puede usar transform: scale(2,2); para lograr eso con el elemento padre configurado para overflow: hidden;

Demo 2

div {
    height:300px;
    width: 300px;
    overflow: hidden;
}

div img {
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}

div:hover img {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);
}

Answer 2

<script>
    function animate(){
        document.getElementById(''a'').style.webkitTransitionDuration=''1s'';
        document.getElementById(''a'').style.backgroundSize="200% 200%";
    }
</script>
<div id="a" onmouseover="animate()" style="width: 200px; height: 70px; border: 1px solid; background: url(''http://www.wpclipart.com/food/fruit/apple/apples_4/apple_honeycrisp_small.png'') no-repeat;background-size: 100% 100%; ">
</div>

Puedes hacer algo como esto para los navegadores webkit.

Demo aquí