#heroImage {
    background-image: url("img/hero_image_blur.jpg");
    height: 100%;
    width: 50%;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

#heroImage > img {
    height: 100%;
    width: auto;
    object-position: center;
    object-fit: cover;
    opacity: 0;
    transition: opacity linear 250ms;
}

#heroImage .loaded {
    opacity: 100;
}