How do I make an accordion animation from images in a horizontal position?

dnwp-crew · September 1, 2025, 5:25pm

Please help me figure this out! I’ve tried everything, well, almost everything, but I still can’t get it to work. Question: how do I make an accordion animation from images? In the horizontal position, all the images (let’s say there are 4 or 5) are compressed, and when you hover over a specific image, it expands and slightly shifts the other images to the sides. And so on with each image.
I’ve attached a link to an example.

example of accordion animation

CODE-NINJA · September 2, 2025, 1:29pm

You will need either to use the HTML-Component or even better the CUSTOM-ELEMENT.
In this case we will use a HTML-COMPONENT for DEMO.
Add a HTML-COMPONENT onto your page (iFrame).
Navigate to the HTML-COMPONENT settings.
Add the following code into your HTML-COMPONENT…

CODE:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>CSS Image Accordion</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Montserrat:700" rel="stylesheet">
<style>
h1 {
  text-align:center;
  font-family:Montserrat,sans-serif;
  color:#333;
}

.accordion {
  width:100%;
  max-width:1080px;
  height:250px;
  overflow:hidden;
  margin:50px auto;
}
.accordion ul {
  width:100%;
  display:table;
  table-layout:fixed;
  margin:0;
  padding:0;
}
.accordion ul li {
  display:table-cell;
  vertical-align:bottom;
  position: relative;
  width:16.666%;
  height:250px;
  background-repeat:no-repeat;
  background-position:center center;
  transition:all 500ms ease;
}
.accordion ul li div {
  display:block;
  overflow:hidden;
  width:100%;
}
.accordion ul li div a {
  display:block;
  height:250px;
  width:100%;
  position:relative;
  z-index:3;
  vertical-align:bottom;
  padding:15px 20px;
  box-sizing:border-box;
  color:#fff;
  text-decoration:none;
  font-family:"Open Sans", sans-serif;
  transition:all 200ms ease;
}
.accordion ul li div a * {
  opacity:0;
  margin:0;
  width:100%;
  text-overflow:ellipsis;
  position:relative;
  z-index:5;
  white-space:nowrap;
  overflow:hidden;
  transform:translateX(-20px);
  transition:all 400ms ease;
}
.accordion ul li div a h2 {
  font-family:Montserrat,sans-serif;
  text-overflow:clip;
  font-size:24px;
  text-transform:uppercase;
  margin-bottom:2px;
  top:160px;
  position:relative;
}
.accordion ul li div a p {
  top:160px;
  font-size:13.5px;
  position:relative;
}

/* Background images */
.accordion ul li:nth-child(1) { background-image:url('http://michael-ferry.com/assets/accordion1.jpg'); }
.accordion ul li:nth-child(2) { background-image:url('http://michael-ferry.com/assets/accordion2.jpg'); }
.accordion ul li:nth-child(3) { background-image:url('http://michael-ferry.com/assets/accordion3.jpg'); }
.accordion ul li:nth-child(4) { background-image:url('http://michael-ferry.com/assets/accordion4.jpg'); }
.accordion ul li:nth-child(5) { background-image:url('http://michael-ferry.com/assets/accordion5.jpg'); }
.accordion ul li:nth-child(6) { background-image:url('http://michael-ferry.com/assets/accordion6.jpg'); }

.accordion ul:hover li,
.accordion ul:focus-within li {
  width:8%;
}
.accordion ul li:focus {
  outline: none;
}
.accordion ul:hover li:hover,
.accordion ul li:focus,
.accordion ul:focus-within li:focus {
  width:60%;
}
.accordion ul:hover li {
  width: 8% !important;
}
.accordion ul:hover li:hover {
  width:60% !important;
}
.accordion ul:hover li:hover a,
.accordion ul li:focus a {
  background:rgba(0,0,0,.4);
}
.accordion ul:hover li:hover a *,
.accordion ul li:focus a * {
  opacity:1 !important;
  transform:translateX(0);
}

/* Mobile stack */
@media screen and (max-width: 600px) {
  body { margin:0; }
  .accordion { height:auto; }
  .accordion ul, .accordion ul:hover {
    display:block;
  }
  .accordion ul li, .accordion ul li:hover {
    display:block;
    width:100%;
    transition:none;
  }
}

.about {
  text-align:center;
  font-family:'Open Sans', sans-serif;
  font-size:12px;
  color:#666;
}
.about a {
  color:blue;
  text-decoration:none;
}
.about a:hover {
  text-decoration:underline;
}
</style>
</head>
<body>

<h1>Аккордеон для изображений на чистом CSS</h1>
<div class="accordion">
  <ul>
    <li tabindex="1">
      <div>
        <a href="#">
          <h2>Блок 1</h2>
          <p>Текс описывающий ссылку</p>
        </a>
      </div>
    </li>
    <li tabindex="2">
      <div>
        <a href="#">
          <h2>Блок 2</h2>
          <p>Текс описывающий ссылку</p>
        </a>
      </div>
    </li>
    <li tabindex="3">
      <div>
        <a href="#">
          <h2>Блок 3</h2>
          <p>Текс описывающий ссылку</p>
        </a>
      </div>
    </li>
    <li tabindex="4">
      <div>
        <a href="#">
          <h2>Блок 4</h2>
          <p>Текс описывающий ссылку</p>
        </a>
      </div>
    </li>
    <li tabindex="5">
      <div>
        <a href="#">
          <h2>Блок 5</h2>
          <p>Текс описывающий ссылку</p>
        </a>
      </div>
    </li>
    <li tabindex="6">
      <div>
        <a href="#">
          <h2>Блок 6</h2>
          <p>Текс описывающий ссылку</p>
        </a>
      </div>
    </li>
  </ul>
</div>

</body>
</html>

Save the settings of HTML-COMPONENT.
PUBLISH your website and navigate to the published site, or try it in PREVIEW-MODE.
Understand how it is working and have fun.

Further steps and optimizations!!!

Recoding the entire code by implementing a JSON capable connection (JSON-DATA).
Integrate communication capabilities between HTML-COMPONENT and your WIX-SITE.
GENERATE A DATABSE on your Wix-Site.
Fill data inside of your DATABASE.
Generate code on your wix page, which would use Wix-Data to get DATABASE-DATA.
Generate a function which would transform your DATA from database into a JSON-formatted data string (if not already done.
Connect your Wix-Page by code with your HTML-COMPONENT, sending data over to HTML-COMPONENT.

NOW YOU WILL BE CAPABLE TO USE YOUR HTML-WIDGET DIRECTLY FROM YOUR DATABASE!!!

HAVE FUN!!!

dnwp-crew · September 4, 2025, 5:45pm

Thanks, Bro, for your quick response and reply. I think it’s a cool solution, but there’s a catch. I tried it and couldn’t do anything.
Sorry if I’m bothering you. Is it possible to create such an animation using VELO Code?

onemoretime · September 5, 2025, 2:17am

I was able to make the CODE-NINJA code run in an iframe just like CodePen. Are you saying that couldn’t be done? Wix has an iframe element, so try adding it to your page and then copy and paste the code that CODE-NINJA generated into it. Also, I suggest increasing the size of the iframe element.

If you want to do everything entirely within Wix, this might be a helpful reference.

CODE-NINJA · September 5, 2025, 11:13am

Ok, let us first do the first steps… getting it simply to work without any connection to your wix-website.

I will try to explain without words…
1) STEP-1:

STEP-2:

STEP-3:

STEP-4:

STEP-5:

STEP-6:

STEP-7:

STEP-8:

STEP-9:
2025-09-05 13_05_05-Window

STEP-10:

** 5 minutes and already done!!!** (Till here the setup is working, but has no connection to your wix-site).

WORKING-EXAMPLE

https://velo-ninja.wixstudio.com/my-site-1/html-accordion

If you want to know how to get the connection established between your wix-site and your html-component, let me know, or try it on your own …

And about an own Wix-Generated solution like …

If i am honest → i would not recommend! Why?

a) You will spend a lot more of time to generate the same what i can do in 10min. You will spend days maybe even weeks, to get same result.
b) Generating it in wix, will require elements to be added onto your wix-page → every pasted element on your wix-page will slow down a) your editor and b) your wix-page.

1x container
3x image
1x Text-Element
1x Paragraph-element
1x Button

Dublication of container

1x container
3x image
1x Text-Element
1x Paragraph-element
1x Button

And again → dublication of container

1x container
3x image
1x Text-Element
1x Paragraph-element
1x Button

Ok, even if we do not take the performance-question into account (and yes looks maybe not bad), still the html-way is much faster and gives you an equal result. If it is only for a totaly simple setup, without any dynamics, then wix-solution is maybe enough.

In general:
Visual but not really functional. Building → STATIC-WEBSITES ← was in year 1999 → we live in 2025 (and even AI already arrived!!!) → so think about it!!!

Your aim should be to generate dynamic website, a website where you do not have later to maintain your whole website manually by your own.

Topic		Replies	Views
Making a accordion item change an image with each item click Ask the community wix-studio , code , question	1	194	June 20, 2024
How do I implement accordion like functionality on my website? (Do not want to use Wix FAQ app) Ask the community code , question	1	244	June 18, 2021
CSS help with a custom horizontal accordion build Ask the community wix-studio , code	1	167	April 29, 2024
Accordion Slider Gallery Ask the community partners , code , wix-blog , technical-talk	1	112	June 24, 2022
Seeking help with smooth animation using Javascript (preferred) / JQuery (less preferred) Ask the community code , question	8	477	March 9, 2023

How do I make an accordion animation from images in a horizontal position?

Related topics