Acordeón de imagenes

Código de acordeón para tu sitio web

Solo agregalo en tu sitio web y listo...

Ha si, lo olvidaba, solo HTML y CSS

 

HTML

<!------------ ACORDEON ---------->

<div class="ctr-accordion">

  <div class="tab">

    <a href="p/programming.html"><img src="

https://images.unsplash.com/"></a>

  </div>

  <div class="tab">

    <a href="p/programming.html"><img src="

https://images.unsplash.com/"></a>

  </div>

  <div class="tab">

    <a href="p/programming.html"><img src="

https://images.unsplash.com/"></a>

  </div>

  <div class="tab">

    <a href="p/programming.html"><img src="

https://images.unsplash.com/"></a>

  </div>

 

</div>

CSS

/************* ACORDEON *************/

.ctr-accordion{

    max-width: 1200px;

    height: 350px;

    display: flex;

    flex-direction: row;

    align-items: center;

    align-content: space-around;

    gap: 2px;

    overflow: hidden;

    margin: 50px auto;

}

 

.tab{

    position: relative;

    width: 16.6%;

    height: inherit;

    padding: 20px;

    background: rgb(150,150,150);

    cursor: pointer;

    transition: width .5s ease;

    border-radius: 25px;

}

 

.tab img{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all 0.5s ease;

    border-radius: 25px;

}

 

.tab:hover img{

    opacity: 0.6;

}

 

.tab:hover{

    width: 500%;

}