.accordion {
    height: 500px;
    overflow: hidden;
    &__wraper {
        width: 20000em;
        height: 521px;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    &__image-container {
        border-left: 1px solid #f4a;
        height: 500px;
        overflow: hidden;
        float: left;
        &:hover {
            .accordion__image-spacer {
                max-width: 1000px;
            }
        }
    }
    &__image {
        background: center center no-repeat;
        -webkit-background-size: cover;
                background-size: cover;
    }
    &__image-spacer {
        -webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;
        -ms-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
        max-width: 100px;
        height: 500px;
        opacity: 0;
        -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
    }
}


<div class="accordion">
    <div class="accordion__wraper">

        <div class="accordion__image-container">
            <div class="accordion__image" style="background-image: url(http://placehold.it/900x500)">
                <img src="http://placehold.it/900x500" alt="" class="accordion__image-spacer">
            </div>
        </div>

        <div class="accordion__image-container">
            <div class="accordion__image" style="background-image: url(http://placehold.it/900x500)">
                <img src="http://placehold.it/900x500" alt="" class="accordion__image-spacer">
            </div>
        </div>

        <div class="i-clear"></div>
    </div>
</div>