Per ognuno di questi devi modificare l'URL del singolo child (1,2,3,4,5,6).
Troverai un paio di immagini ripetute perché ho fatto dei test.
Dimmi se riesci a metterlo in scheda
Codice: Seleziona tutto
<style>
<style>
.accordion {
width: 100%;
max-width: 610px;
height: 550px;
overflow: hidden;
margin: 0px auto;
}
ul {
height: 540px;
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 12.0%; // 6 into 100 height:600px; background-repeat:no-repeat; background-position:center center; transition:all 550ms ease; div { display:block; overflow:hidden; width:100%; a { display:block; height:600px; 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://i.pinimg.com/564x/25/c7/51/25c751de11d49888f7c7dc4b6ddbac4a.jpg'); } li:nth-child(2) { background-image:url('https://i.pinimg.com/564x/c0/1a/a0/c01aa091485f6e4913be87b8e12805bd.jpg'); } li:nth-child(3) { background-image:url('https://i.pinimg.com/564x/ac/ad/61/acad610dacc5773b308bdd33f4c6b2e1.jpg'); } li:nth-child(4) { background-image:url('https://i.pinimg.com/564x/2e/23/ab/2e23ab529370ab292a930811952d0380.jpg'); } li:nth-child(5) { background-image:url('https://i.pinimg.com/564x/01/10/0b/01100baf7ef719e18ea1bfeb0b2a0565.jpg'); }li:nth-child(6) { background-image:url('https://i.pinimg.com/564x/1a/3e/48/1a3e480c6470d3d1d9519a35f5412a1e.jpg'); } li:hover { width:70%; a { background:rgba(0,0,0,.4); * { opacity:1; -webkit-transform:translateX(0); transform:translateX(0); } }}
.accordion2 li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 12.0%; // 6 into 100 height:600px; background-repeat:no-repeat; background-position:center center; transition:all 550ms ease; div { display:block; overflow:hidden; width:100%; a { display:block; height:600px; 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 */ .accordion2 li:nth-child(1) { background-image:url('https://i.pinimg.com/564x/c0/1a/a0/c01aa091485f6e4913be87b8e12805bd.jpg'); } .accordion2 li:nth-child(2) { background-image:url('https://i.pinimg.com/564x/ac/ad/61/acad610dacc5773b308bdd33f4c6b2e1.jpg'); } .accordion2 li:nth-child(3) { background-image:url('https://i.pinimg.com/564x/ac/ad/61/acad610dacc5773b308bdd33f4c6b2e1.jpg'); } .accordion2 li:nth-child(4) { background-image:url('https://i.pinimg.com/564x/2e/23/ab/2e23ab529370ab292a930811952d0380.jpg'); } .accordion2 li:nth-child(5) { background-image:url('https://i.pinimg.com/564x/01/10/0b/01100baf7ef719e18ea1bfeb0b2a0565.jpg'); }.accordion2 li:nth-child(6) { background-image:url('https://i.pinimg.com/564x/1a/3e/48/1a3e480c6470d3d1d9519a35f5412a1e.jpg'); } li:hover { width:70%; a { background:rgba(0,0,0,.4); * { opacity:1; -webkit-transform:translateX(0); transform:translateX(0); } }}
.accordion3 li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 12.0%; // 6 into 100 height:600px; background-repeat:no-repeat; background-position:center center; transition:all 550ms ease; div { display:block; overflow:hidden; width:100%; a { display:block; height:600px; 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 */ .accordion3 li:nth-child(1) { background-image:url('https://i.pinimg.com/564x/25/c7/51/25c751de11d49888f7c7dc4b6ddbac4a.jpg'); } .accordion3 li:nth-child(2) { background-image:url('https://i.pinimg.com/564x/c0/1a/a0/c01aa091485f6e4913be87b8e12805bd.jpg'); } .accordion3 li:nth-child(3) { background-image:url('https://i.pinimg.com/564x/ac/ad/61/acad610dacc5773b308bdd33f4c6b2e1.jpg'); } .accordion3 li:nth-child(4) { background-image:url('https://i.pinimg.com/564x/2e/23/ab/2e23ab529370ab292a930811952d0380.jpg'); } .accordion3 li:nth-child(5) { background-image:url('https://i.pinimg.com/564x/01/10/0b/01100baf7ef719e18ea1bfeb0b2a0565.jpg'); }.accordion3 li:nth-child(6) { background-image:url('https://i.pinimg.com/564x/1a/3e/48/1a3e480c6470d3d1d9519a35f5412a1e.jpg'); } 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></li>
</div>
<div class="accordion2">
<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></li>
</div>
<div class="accordion3">
<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></li>
</div>