Overflowing horizontally div, which scrolls on hot spot hover.

gallery.md

100%+ Horizontal Slider

This code content is aimed at creating a gallery/area which flows over the borders of the page with minimal markup. Any images you insert into gallery-container will extend beyond the 100% width of the page. Within this you will be able to hover the hot-spot's at either side of the div to progress/slide along the content.

http://codepen.io/jackabox/pen/aONJYV

possible reword

script.js

$(".hot-spot.left").hover(function() {
    $('.study-gallery').animate({scrollLeft: 0}, 7000);
}, function() {
    $('.study-gallery').stop();
});

$(".hot-spot.right").hover(function() {
    $('.study-gallery').animate({scrollLeft: $('.gallery-container').width()}, 7000);
}, function() {
    $('.study-gallery').stop();
});

study.html

 <div class="study-gallery-wrap">
    <div class="study-gallery">
        <div class="gallery-container">
            <img src="img/samples/photo08.jpg" alt="">
            <img src="img/samples/photo09.jpg" alt="">
            <img src="img/samples/photo10.jpg" alt="">
            <img src="img/samples/photo11.jpg" alt="">
            <img src="img/samples/photo12.jpg" alt="">
            <img src="img/samples/photo13.jpg" alt="">
            <img src="img/samples/photo14.jpg" alt="">
        </div>
    </div>
    <div class="hot-spot left"></div>
    <div class="hot-spot right"></div>
</div>

style.scss

.study-gallery-wrap {
    position: relative;
    .hot-spot {
        position: absolute;
        z-index: 50;
        top: 0;
        bottom: 0;
        display: block;
        width: 150px;
        height: 600px;
        content: '';
        background-repeat: repeat-x;
        &.left {
            left: 0;
        }
        &.right {
            right: 0;
        }
        &:hover {
            cursor: pointer;
        }
    }
}

.study-gallery {
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 600px;
    margin-bottom: 20px;
    .gallery-container {
        display: inline-block;
        display: table;
        overflow-y: hidden;
        height: 600px;
        white-space: nowrap;
    }
    img {
        display: inline-block;
        width: auto;
        height: 100%;
    }
}

Great gallery Jake! :)

Cheers Aran!