The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Scrolling HTML
tugarec
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tugarec
post May 18 2020, 02:34 AM
Post #2





Group: Members
Posts: 2
Joined: 15-May 20
Member No.: 27,344



up
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 14th July 2020 - 07:11 PM