Pure-CSS Horizontally Scrolling Image Ads

This simple code uses HTML and CSS, with no JavaScript, to generate an image ad bar that will scroll horizontally on desktop and be swipeable on mobile browsers.

The CSS:


    #scrollbox {
        margin: 10px auto 20px auto;
        width: 100%;
        height: auto;
        display: inline-flex;
        overflow: auto;
        background: #FFF;
    }

    #scrollbox img { padding: 0 5px 0 5px }

The HTML:


    <div id="scrollbox">
        <a href="#" target="_blank"><img src="Images/scrollbox/1.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
        <a href="#" target="_blank"><img src="Images/scrollbox/2.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
        <a href="#" target="_blank"><img src="Images/scrollbox/3.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
        <a href="#" target="_blank"><img src="Images/scrollbox/4.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
        <a href="#" target="_blank"><img src="Images/scrollbox/5.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
        <a href="#" target="_blank"><img src="Images/scrollbox/6.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
        <a href="#" target="_blank"><img src="Images/scrollbox/7.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
    </div>

The Effect:

Each colored box represents an image ad that you need to create. Each image anchors a text link made with the Site Stripe. This is perfectly allowable as long as the guidelines for creatives are followed.

The code I posted above is all that's needed. This simple, pure HTML and CSS solution contains no JS for ad blockers to block or to slow down the page load time.

buymeacoffee.com/rjmweb