✔ background-size soll sich "smooth" vergrößern

[rernanded]

Hallo, suche Lösung= Ergänzung = Änderung damit sich ein Hintergrundbild langsam vergrößert wenn man mit die Maus über das entsprechend div bewegt. Folgendes hab ich schon :
MONI

PS: Gehts auch mittels css? Ohne js?

<script>
var blablabla = document.getElementById('header');
blablabla.style.backgroundSize = '100%';

function bigger() {
    blablabla.style.backgroundSize = '300%';
blablabla.style.transition = '10s';
}
function smaller() {
   blablabla.style.backgroundSize = '100%';
blablabla.style.transition = '10s';
}
</script>


<div id="header" onmousemove="bigger()"></div>

<style>
#header { 
   width: 100%;
   height: 70%;
   background: transparent;
   background: #FFF url(kinder.jpg) no-repeat center center;
   background-size:  100% !important;
}
</style>

 

[goto;]

Hallo Moni,

ja, mit transition, so wie in Deinem Code bereits angedeutet.

https://jsfiddle.net/26tppa08/

Viele Grüße
goto;

 

[rernanded]

@goto;
Nein das kenne ich selbst, das löst nicht mein Problem, weil das ganze div größer wird. Ich will nur daß das Hintergrundbild des div größer wird, das div bleibt dabei so groß wie bisher.

 

[Sempervivum]

Du kannst problemlos mit transition auch die Größe des Hintergrundbildes animieren:
https://jsfiddle.net/Sempervivum/4dn820e2/2/

 

[rernanded]

@Sempervivum Thats what I need.