Scrolling HTML Options

[tugarec]

Hi!

I'm totaly not an expert on Html but this code is buging me a lot to understand it.

<style>.accordion { width:100%; max-width:610px; height:400px; overflow:hidden; margin:0px auto;} ul { height:400px; width:100%; display:table; table-layout:fixed; margin:0; padding:0; } li { display:table-cell; vertical-align:bottom; position: relative; width:12.0%; // 6 into 100 height:400px; background-repeat:no-repeat; background-position:center center; transition:all 500ms ease; div { display:block; overflow:hidden; width:100%; a { display:block; height:400px; width:100%; position:relative; z-index:3; vertical-align:bottom; padding:5px 5px; box-sizing:border-box; color:#fff; text-decoration:none; font-family:Open Sans, sans-serif; transition:all 200ms ease; * { opacity:0; margin:0; width:100%; text-overflow:ellipsis; position:relative; z-index:5; white-space:nowrap; overflow:hidden; -webkit-transform:translateX(-0px); transform:translateX(-0px); -webkit-transition:all 400ms ease; transition:all 400ms ease; } } } } /*Background images */li:nth-child(1) { background-image:url('https://funkyimg.com/i/34HT9.jpeg'); } li:nth-child(2) { background-image:url('https://funkyimg.com/i/34HT9.jpeg'); } li:nth-child(3) { background-image:url('https://funkyimg.com/i/34HT9.jpeg'); } li:nth-child(4) { background-image:url('https://funkyimg.com/i/34HT9.jpeg'); } li:nth-child(5) { background-image:url('https://funkyimg.com/i/34HT9.jpeg'); }li:nth-child(6) { background-image:url('https://funkyimg.com/i/34HT9.jpeg'); } li:hover { width:70%; a { background:rgba(0,0,0,.4); * { opacity:1; -webkit-transform:translateX(0); transform:translateX(0); } }}</style> <div class="accordion"><ul><li><div><a></a></div></li><li><div><a></a></div></li><li><div><a></a></div></li><li><div><a></a></div></li><li><div><a></a></div></li><li></div>

So, what i got for now are pictures that moves left and right when pointing a picture, but how to get the same effect but up and down?

[tugarec]

up