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

rernanded

Erfahrenes Mitglied
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?
HTML:
<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;
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.
 

Neue Beiträge

Zurück