Why is my loop adding classes to the last item in the loop?

Question

I'm trying to bind events to 8 items with the class-name image, this works:

    var images = document.getElementsByClassName('image');

    Array.from(images).forEach(function(image) {
       image.onmouseup = function(){


        //expand
        var iframe = image.getElementsByTagName('iframe')[0],
            player;
        image.classList.add('focus');

    };
});

but when I try to use a normal for-loop like this, the only item get's the class focus, i can click any item though.

var images = document.getElementsByClassName('image');


for(var i = 0; i < images.length; i++){
    var image = images[i];

    image.onmouseup = function(){


        //expand
        var iframe = image.getElementsByTagName('iframe')[0],
            player;
        image.classList.add('focus');

    };
};