Saturday

I'm looking to create a diagonal accordion with distinct content (text and images) in its normal state and additional elements on hover

5:28 PM accordion, css, frontend, html No comments

Issue

I am making an accordion and I want it to be a tilt, I don't know exactly how to explain this so I am sharing the image of what I want This what I want

and you can see both the normal state and the hover state over there. In the normal state and hover state the accordion li is not straight, it is diagonal, which means broader from the top and narrower from the bottom. I don't know how to do it and I want to put numbering and a icon image on normal state and numbering and icon and text detailed on hover as you can see in the image here is my current code

.accordion {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 1000px;

}

.accordion li {
  position: relative;
  overflow: hidden;
  flex: 0 0 80px;
  cursor: pointer;
  width: 357px; /* Normal state width */
  height: 300px; /* Adjust the height as needed */
  transition: width 0.3s; /* Added transition for smooth width change */
}

.accordion li:hover {
  width: 500px; /* Hover state width */
}

.accordion li img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%); /* Convert image to grayscale */
  transition: transform 0.3s; /* Added transition for smooth hover effect */
  z-index: 1; /* Ensure the image appears below the text and overlay */
}

.accordion li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.00) 0%,
    #9D8B5B 99.94%
  ), rgba(33, 26, 9, 0.40);
  z-index: 2; 
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s; 
}

.accordion li:hover::before {
  opacity: 1;
  visibility: visible;
}

.accordion li span {
  position: relative;
  z-index: 3; /* Text is now above image and overlay */
  color: #fff; /* Set text color to white */
  transition: color 0.3s; /* Added transition for smooth color change */
}

.accordion li h2, .accordion li p {
  position: relative;
  z-index: 3; /* Text is now above image and overlay */
  color: #fff !important; /* Set text color to white */
  transition: color 0.3s; /* Added transition for smooth color change */
}

.accordion li:hover span, .accordion li:hover h2, .accordion li:hover p {
  color: #000; /* Set text color to black on hover */
}

.accordion li,
.accordion li .content,
.accordion li .content span {
  transition: 0.3s;
}

.accordion li .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  color: #fff;
  padding: 15px;
  background: #02022e;
  background: linear-gradient(
    0deg,
    rgb(0 0 0 / 70%) 10%,
    rgb(255 255 255 / 0%) 100%
  );
  opacity: 0;
  visibility: hidden;
}

.accordion li .content span {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
}

.accordion li:hover {
  flex: 0 1 260px;
  scale: 1.1;
  z-index: 10;
}

.accordion h2 {
  font-weight: 400;
  font-size: 24px;
  line-height: 45px;
  border-bottom: 2px solid #fff;
  margin-bottom: 10px;
  white-space: nowrap;
}

.accordion li:hover .content {
  opacity: 1;
  visibility: visible;
}

.accordion li:hover span {
  transform: translateX(-50%);
  opacity: 1;
  visibility: visible;
}

.accordion-mainDiv{
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 30;

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Accordion 1</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <ul class="accordion">
      <li>
        <img src="./first_image.png" />
        <div class="content">
          <span>
            <div class="accordion-mainDiv">
              <img src="./stone-1.png" />
              <div>
                <h2 style="color: var(--color-gray-10, #FFF);
                font-family: Ubuntu;
                font-size: 48px;
                font-style: normal;
                font-weight: 300;
                line-height: 54px; /* 112.5% */
                text-transform: uppercase;">01.</h2>
                <h2 style="color: var(--color-gray-10, #FFF);
                font-family: Ubuntu;
                font-size: 48px;
                font-style: normal;
                font-weight: 300;
                line-height: 54px; /* 112.5% */
                text-transform: uppercase;">IDENTIFIKATION</h2>
                <p style="color: var(--color-gray-10, #FFF);
                font-family: Ubuntu;
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;">
                  Der Vertrieb ist nur dann erfolgreich, wenn eine effektive
                  Identifikation und Beschreibung des Angebots sowie eine
                  professionelle Kundenansprache zur Tagesordnung gehören. In
                  der Göker Akademie werden Methoden vermittelt, um potenzielle
                  Kunden gezielter zu identifizieren und ihre Bedürfnisse besser
                  zu verstehen.
                </p>
              </div>
            </div>
          </span>
        </div>
      </li>
      <li>
        <img src="./second_image.png" />
        <div class="content">
          <span>
            <div class="accordion-mainDiv">
              <img src="./stone-2.png" />
              <div>
                <h2>5</h2>
                <p>Kelly Cox</p>
                <p>Designer</p>
              </div>
            </div>
          </span>
        </div>
      </li>
      <li>
        <img src="./third_image.png" />
        <div class="content">
          <span>
            <div class="accordion-mainDiv">
              <img src="./stone-3.png" />
              <div>
                <h2>5</h2>
                <p>Kelly Cox</p>
                <p>Designer</p>
              </div>
            </div>
          </span>
        </div>
      </li>
      <li>
        <img src="./fourth_image.png" />
        <div class="content">
          <span>
            <div class="accordion-mainDiv">
              <img src="./stone-4.png" />
              <div>
                <h2>5</h2>
                <p>Kelly Cox</p>
                <p>Designer</p>
              </div>
            </div>
          </span>
        </div>
      </li>

      <li>
        <img src="./fifth_image.png" />
        <div class="content">
          <span>
            <div class="accordion-mainDiv">
              <img src="./stone-5.png" />
              <div>
                <h2>5</h2>
                <p>Kelly Cox</p>
                <p>Designer</p>
              </div>
            </div>
          </span>
        </div>
      </li>
    </ul>
  </body>
</html>

The effect is also a 3D effect but I don't want a 3D effect for the accordion, It should expand on hover by staying in its place. I really appreciate your help in this.

Solution

I think You want something like this. Hope it will help you.

.accordion {
  min-width: 100%;
  display: flex;
  justify-content: center;
}

.accordion li {
  position: relative;
  overflow: hidden;
  /* flex: 0 0 200px; */
  cursor: pointer;
  height: 680px;
  transition: flex 0.3s;
  flex: 1;
}

.accordion li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform 0.3s;
  z-index: 1;
  margin-bottom: 50%;
}

.accordion li img.stones {
  filter: grayscale(0%);
}

.accordion li .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  color: #fff;
  padding: 15px;
  background: #02022e;
  background: linear-gradient(0deg, rgb(0 0 0 / 70%) 10%, rgb(255 255 255 / 0%) 100%);
  display: flex;
  flex-direction: column; /* Display items in a column layout */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  text-align: center; /* Center text */
}

.accordion li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='668' height='850' viewBox='0 0 668 850' fill='none'%3E%3Cpath d='M667.61 0H0L-1 850.5L617.703 850L667.61 0Z' fill='%23211A09' fill-opacity='0.4'/%3E%3Cpath d='M667.61 0H0L-1 850.5L617.703 850L667.61 0Z' fill='url(%23paint0_linear_26_33)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_26_33' x1='240.805' y1='0' x2='240.805' y2='850' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%239D8B5B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

.accordion li h2,
.accordion li p {
  margin: 10px 0; /* Add margin between heading and paragraph */
}

.accordion li:hover {
  flex: 0 1 500px; /* Adjust hover state width */
}

.accordion li:hover img {
  transform: scale(1.1); /* Adjust hover state scaling */
}

.accordion li:hover .content {
  opacity: 1;
  visibility: visible;
  z-index: 3;
}

.accordion li:hover::before {
  opacity: 1;
  visibility: visible;
}

.accordion-mainDiv{
  display: none;
  flex-direction: row;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
}
.accordion-mainDiv1{
  position: absolute;
  top: 40%;
  display: flex;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
}
.accordion-innerDiv{
  display: flex;
  flex-direction: column;
}
.accordion li img{
  margin-bottom: 0;
}

.hovered-number{
  color: var(--color-gray-10, #FFF);
  text-transform: uppercase;
  color: var(--color-gray-10, #FFF);
  font-family: Ubuntu;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  text-transform: uppercase;
  text-align: left;
}
.hovered-number1{
  color: #CEB677;
  font-family: Ubuntu;
  font-size: 42px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  text-transform: uppercase;
  text-align: left;
}
.hovered-heading{
  color: #CEB677;
  font-family: Ubuntu;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  text-align: left;
}

.hovered-para{
  color: var(--color-gray-10, #FFF);
  font-family: Ubuntu;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: left;
}
.content {
  position: relative;
}
.accordion-mainDiv {
  display: none;
}

.content:hover .accordion-mainDiv {
  display: flex;
  visibility: visible;
  opacity: 1;
}
.content:hover .accordion-mainDiv1 {
  display: none;
  visibility: hidden;
  opacity: 0;
}
.content:not(:hover) .accordionMainDiv{
 display: none;
 visibility: hidden;
 opacity: 0;
}

.content:not(:hover) .accordionMainDiv1 {
  display: flex;
  visibility: visible;
  opacity: 1;
}

.accordion-innerDiv1{
  padding-left: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Accordion 1</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <ul class="accordion">
    <li>
      <img src="image1.png" />
      <div class="content">
        <div class="accordion-mainDiv">
          <img class=stones src="stone1.png" style="width:75px; height: 162px;">
          <div class=accordion-innerDiv>
            <h2 class=hovered-number>01.</h2>
            <h2 class=hovered-number>Identifikation</h2>
            <p class=hovered-para>Der Vertrieb ist nur dann erfolgreich, wenn eine effektive Identifikation und
              Beschreibung des Angebots sowie eine professionelle Kundenansprache zur Tagesordnung gehören.
            <p class=hovered-para>In der Göker Akademie werden Methoden vermittelt, um potenzielle Kunden gezielter zu
              identifizieren und ihre Bedürfnisse besser zu verstehen.
          </div>
        </div>
        <div class="accordion-mainDiv1">
          <img src="stone1.png" class=stones style="width:75px;height: 162px;">
          <div class=accordion-innerDiv1>
            <h2 class=hovered-number1>01.</h2>
            <h2 class=hovered-heading>Identifikation</h2>
          </div>
        </div>
      </div>
    </li>
    <li>
      <img src="image2.png" />
      <div class="content">
        <div class="accordion-mainDiv">
          <img class="stones" src="stone2.png" style="width:75px; height: 162px;" />
          <div class="accordion-innerDiv">
            <h2 class="hovered-number">02.</h2>
            <h2 class="hovered-number">Kontakt und Bedarfsanalyse</h2>
            <p class="hovered-para">Die Kontakt- und Bedarfsanalyse sind wichtige Schritte im Vertriebsprozess, um
              potenzielle
              Kunden zu identifizieren und ihre Bedürfnisse zu verstehen. Dabei werden auch
              Entscheidungsträger und Einflussfaktoren ermittelt. Es ist entscheidend, die Hierarchie und
              Entscheidungsprozesse zu kennen, um effektiv zu kommunizieren. </p>
            <p class="hovered-para">Zusammenfassend geht es bei der Kontakt- und Bedarfsanalyse darum, potenzielle
              Kunden zu identifizieren, eine Beziehung aufzubauen und ihre spezifischen Bedürfnisse zu verstehen. Wie
              das geht zeige ich dir.</p>
          </div>
        </div>
        <div class="accordion-mainDiv1">
          <img src="stone2.png" class=stones style=width:75px;height:162px>
          <div class=accordion-innerDiv1>
            <h2 class=hovered-number1>02.</h2>
            <h2 class=hovered-heading>Kontakt und Bedarfsanalyse</h2>
          </div>
        </div>
      </div>
      </div>
      </div>
    </li>

    <li>
      <img src="image2.png" />
      <div class="content">
        <div class="accordion-mainDiv">
          <img class="stones" src="stone2.png" style="width:75px; height: 162px;" />
          <div class="accordion-innerDiv">
            <h2 class="hovered-number">02.</h2>
            <h2 class="hovered-number">Kontakt und Bedarfsanalyse</h2>
            <p class="hovered-para">Die Kontakt- und Bedarfsanalyse sind wichtige Schritte im Vertriebsprozess, um
              potenzielle
              Kunden zu identifizieren und ihre Bedürfnisse zu verstehen. Dabei werden auch
              Entscheidungsträger und Einflussfaktoren ermittelt. Es ist entscheidend, die Hierarchie und
              Entscheidungsprozesse zu kennen, um effektiv zu kommunizieren. </p>
            <p class="hovered-para">Zusammenfassend geht es bei der Kontakt- und Bedarfsanalyse darum, potenzielle
              Kunden zu identifizieren, eine Beziehung aufzubauen und ihre spezifischen Bedürfnisse zu verstehen. Wie
              das geht zeige ich dir.</p>
          </div>
        </div>
        <div class="accordion-mainDiv1">
          <img src="stone2.png" class=stones style=width:75px;height:162px>
          <div class=accordion-innerDiv1>
            <h2 class=hovered-number1>02.</h2>
            <h2 class=hovered-heading>Kontakt und Bedarfsanalyse</h2>
          </div>
        </div>
      </div>
      </div>
      </div>
    </li>

    <li>
      <img src="image2.png" />
      <div class="content">
        <div class="accordion-mainDiv">
          <img class="stones" src="stone2.png" style="width:75px; height: 162px;" />
          <div class="accordion-innerDiv">
            <h2 class="hovered-number">02.</h2>
            <h2 class="hovered-number">Kontakt und Bedarfsanalyse</h2>
            <p class="hovered-para">Die Kontakt- und Bedarfsanalyse sind wichtige Schritte im Vertriebsprozess, um
              potenzielle
              Kunden zu identifizieren und ihre Bedürfnisse zu verstehen. Dabei werden auch
              Entscheidungsträger und Einflussfaktoren ermittelt. Es ist entscheidend, die Hierarchie und
              Entscheidungsprozesse zu kennen, um effektiv zu kommunizieren. </p>
            <p class="hovered-para">Zusammenfassend geht es bei der Kontakt- und Bedarfsanalyse darum, potenzielle
              Kunden zu identifizieren, eine Beziehung aufzubauen und ihre spezifischen Bedürfnisse zu verstehen. Wie
              das geht zeige ich dir.</p>
          </div>
        </div>
        <div class="accordion-mainDiv1">
          <img src="stone2.png" class=stones style=width:75px;height:162px>
          <div class=accordion-innerDiv1>
            <h2 class=hovered-number1>02.</h2>
            <h2 class=hovered-heading>Kontakt und Bedarfsanalyse</h2>
          </div>
        </div>
      </div>
      </div>
      </div>
    </li>

    <li>
      <img src="image2.png" />
      <div class="content">
        <div class="accordion-mainDiv">
          <img class="stones" src="stone2.png" style="width:75px; height: 162px;" />
          <div class="accordion-innerDiv">
            <h2 class="hovered-number">02.</h2>
            <h2 class="hovered-number">Kontakt und Bedarfsanalyse</h2>
            <p class="hovered-para">Die Kontakt- und Bedarfsanalyse sind wichtige Schritte im Vertriebsprozess, um
              potenzielle
              Kunden zu identifizieren und ihre Bedürfnisse zu verstehen. Dabei werden auch
              Entscheidungsträger und Einflussfaktoren ermittelt. Es ist entscheidend, die Hierarchie und
              Entscheidungsprozesse zu kennen, um effektiv zu kommunizieren. </p>
            <p class="hovered-para">Zusammenfassend geht es bei der Kontakt- und Bedarfsanalyse darum, potenzielle
              Kunden zu identifizieren, eine Beziehung aufzubauen und ihre spezifischen Bedürfnisse zu verstehen. Wie
              das geht zeige ich dir.</p>
          </div>
        </div>
        <div class="accordion-mainDiv1">
          <img src="stone2.png" class=stones style=width:75px;height:162px>
          <div class=accordion-innerDiv1>
            <h2 class=hovered-number1>02.</h2>
            <h2 class=hovered-heading>Kontakt und Bedarfsanalyse</h2>
          </div>
        </div>
      </div>
      </div>
      </div>
    </li>
  </ul>
</body>

Answered By - Noor ul ain Ibrahim

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Saturday

I'm looking to create a diagonal accordion with distinct content (text and images) in its normal state and additional elements on hover

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels