我正在寻找创建一个对角手风琴，其正常状态下具有不同的内容（文本和图像）以及悬停时的附加元素

问题描述 投票：0回答：1

我正在制作一个手风琴，我希望它是倾斜的，我不知道如何解释这一点，所以我分享我想要的图像This what I want

你可以在那里看到正常状态和悬停状态。在正常状态和悬停状态下，折叠线不是笔直的，而是对角线的，这意味着从顶部开始较宽，从底部开始较窄。我不知道该怎么做，我想将编号和图标图像置于正常状态，并在悬停时详细说明编号、图标和文本，如您在图像中看到的，这是我当前的代码

.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>

该效果也是 3D 效果，但我不希望手风琴具有 3D 效果，它应该通过停留在其位置上来在悬停时扩展。我真的很感谢你在这方面的帮助。

html css frontend accordion
1个回答
0
投票

我想你想要这样的东西。希望对你有帮助。

.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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.