Image horizontal scrolling in html

Horizontal scroll css images

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap;
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

Source: stackoverflow.com

Images horizontal scroll

<html>
<head>
<style>
#container {
    width: 100%;
    height: 150px;
    background-color: #ff0000;
    overflow: visible;
    white-space:nowrap;
}

#container .slide {
    display: inline-block;
}
</style>
</head>
<body>
<div id="container">
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
</div>
</body>

Source: stackoverflow.com

Similar codes

0 vote373 views1 answer
Css rotate 3d
CSS
1 vote361 views1 answer
Css color of input
CSS
0 vote377 views1 answer
Which bootstrap css class will you use to put the navbar at the top of the page? feel free to check out the bootstrap website.
CSS Bootstrap
0 vote322 views1 answer
Change the arrow during click css
CSS
10 votes353 views2 answers
Remove underline on hover span
CSS
0 vote394 views1 answer
Materialize css form file input
CSS Materialize
0 vote332 views1 answer
Icon float right side input css
CSS
1 vote330 views1 answer
Qwant
CSS
0 vote342 views1 answer
Remove focus blue lines from anchor tag
CSS
11 votes318 views2 answers
How to change image position in css
CSS