ACF as background-image with hover

On a page, I want to display a list with all of the associated childpages. On the child pages, I have added 2 custom fields for images. “normal” for normal state, “hover” for hover state.

Here is my code:

<?php
$args = array(
'post_type'      => 'page',
'posts_per_page' => -1,
'post_parent'    => $post->ID,
'order'          => 'ASC',
'orderby'        => 'menu_order'
);
$parent = new WP_Query( $args );
if ( $parent->have_posts() ) : ?>
    <?php while ( $parent->have_posts() ) : $parent->the_post(); ?>
        <?php
            $image = get_field('normal');
            $hover = get_field('hover');
            if( !empty($image) ): ?>
                <style type="text/css">
                     .preview-page {
                         background-image: url('<?php echo $image['url']; ?>');
                     }
                     .preview-page:hover {
                         background-image: url('<?php echo $hover['url']; ?>');
                     }
                </style>
        <?php endif; ?>
        <a class="preview-page" href="<?php the_permalink() ?>">
            <span><?php the_title(); ?></span>
        </a><!-- end #category-name -->                         

    <?php endwhile; ?>
<?php endif; wp_reset_query(); ?>

My problem is, that all child pages are shown with their own title, but all with the same background image (the one of the last child). How can I achieve that every child page has the right background image? I guess it’s some failure within the loop.

When I display the image in a regular img-tag, they’re shown right.