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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.