Scrolling HTML |
Scrolling HTML |
tugarec |
May 15 2020, 03:28 PM
Post
#1
|
Group: Members Posts: 2 Joined: 15-May 20 Member No.: 27,344 |
Hi!
I'm totaly not an expert on Html but this code is buging me a lot to understand it. QUOTE <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 |
May 18 2020, 02:34 AM
Post
#2
|
Group: Members Posts: 2 Joined: 15-May 20 Member No.: 27,344 |
up
|
Lo-Fi Version | Time is now: 2nd May 2024 - 07:32 PM |