Ημέρα: 7 Φεβρουαρίου 2018

Δημοσιεύτηκε στισ

Ακορντεόν

Για να δουλέψει ο κώδικας για το εφέ που βλέπετε παραπάνω, χρειάζεται η παρακάτω δομή στην HTML:

<div id="accordion">

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

</div>

Η εξωτερική περιοχή <div id=”accordion”> ορίζει και ονοματίζει την περιοχή του εφέ. Για κάθε εικόνα χρειάζεται ένα στοιχείο <div>, το οποίο περιέχει άλλο ένα <div>, που περιέχει την εικόνα <img>.

Ο κώδικας CSS που δημιουργεί το εφέ είναι ο ακόλουθος:

/* χρήση των κανόνων διάταξης flex */
#accordion {
  display:flex;
  justify-content:space-between;
}

/* αρχική κατάσταση των στοιχείων */
#accordion > div {
  width:25%;
  transition:width 1s;
  overflow:hidden;
  display:flex;
  margin:0 1px;
}
#accordion > div > div {
  height: 100%;
  top:0%;
  transition:height 1s, top 1s;
  display:flex;
  position:relative;
  right:-50%;
}
#accordion img {
  left:-50%;
  position:relative;
  max-width: unset;
}

/* εφέ μεγέθυνσης της περιοχής κάτω από το ποντίκι */
#accordion > div:hover {
  width:75%;
  transition:width 1s;
}
#accordion > div > div:hover {
  height: 104%;
  top:-2%;
  transition:height 1s, top 1s;
}