Midian Realms Forum

Inviato: **18/03/2021, 23:42**

Così sono 3 blocchi da 6, uno sotto l'altro.

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>

Midian Realms Forum

HTML per nabbi

Re: HTML per nabbi