Image overlay is loading a split second before image

I’m trying to get a simple image overlay on a list of posts pulled from my blog using Wordress get_posts(). So far I have the overlay working however it loads up a second before the image is loaded and it makes for an unsightly red effect where each image should be when the page loads.

I’m wondering if there is a way around this, would anyone have any suggestions on how to prevent this.

This is my code:

<div class="post-container">
    <?php
    $args = array('posts_per_page' => 5);
    $myposts = get_posts($args);
    foreach ($myposts as $post) : setup_postdata($post);
        ?>
        <div class="post-box">
            <div class='post-img-overlay'>
                <div class='post-img' style="background-image:url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)) ?>');"></div>
            </div>
            <a class='post-title' href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            <p><?php the_excerpt(); ?></p>
            <a  class='read-more' href="<?php the_permalink(); ?>">Read more</a>
        </div>
        <?php
    endforeach;
    wp_reset_postdata();
    ?>
</div>

Just a simple WordPress Loop that gets 5 posts and info relating to each and displays them in their own div on the homepage.

The image overlay part is here:

<div class='post-img-overlay'>
    <div class='post-img' style="background-image:url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)) ?>');"></div>
</div>

The CSS behind it is here:

.post-img{
    height:300px;
    width: 100%;
    background-size:cover;
    transition : opacity 500ms ease-out; 
    -webkit-transition : opacity 500ms ease-out; 
    -moz-transition : opacity 500ms ease-out;
    -o-transition : opacity 500ms ease-out;  
}
.post-img:hover {
    opacity: 0.5;
} 
.post-img-overlay {
     background-color: red;
     max-width: 100%; 
     max-height: 300px;
}

It works here on my jsfiddle: http://jsfiddle.net/javacadabra/nphL3Lj5/5/ but when I use the above code with some php to actually dynamically pull the images I get the overlay loading a split second before the image.

Any help is much appreciated!