My objective with this card animation is for the cards to expand in size when hovered over. Unfortunately, the current issue is that when one card is hovered over, all the other cards also expand, which is not the intended behavior. I am seeking a solution to ensure that only the card being hovered over increases in size, while the others remain unchanged.
HTML:
<div class="card-container" style="margin-top: -25rem; gap: auto">
<div class="card col-lg-2 col-md-6 col-sm-12 col-12">
<div class="img">
<img src="img/logoalpinestars.png" alt="logo alpinestars" style="transform: scale(0.2);">
</div>
<div class="content">
<span class="desc text-white">A Alpinestars, criada em
1963, é a marca líder
mundial em tecnologia de
proteção paira prática de
esportes à motor. A
empresa acredita que o
melhor design é fruto do
aprendizado obtido sob
condições extremas.</span>
</div>
<div class="arrow">
<span>⇡</span>
</div>
</div>
<!-- more card elements here -->
</div>
css:
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.card {
border-radius: 16px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
cursor: pointer;
width: calc(25% - 20px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background-image: linear-gradient(#b8b4b4, #b8b4b4);
transition: all 0.5s;
margin-bottom: 20px;
}
.card:hover {
background-image: linear-gradient(#080434, #080434);
}
.card .img {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-size: cover;
background-position: center;
transition: all 0.5s;
z-index: 2;
position: relative;
opacity: 0.8;
}
.card .img span {
text-transform: uppercase;
font-size: 24px;
font-weight: 100;
font-style: italic;
transition: all 0.5s;
}
.card:hover .img {
width: 110%;
opacity: 1;
}
.card:hover .img span {
font-size: 28px;
}
.card .content {
padding: 0px 20px;
height: 0;
opacity: 0;
transition: all 0.5s;
position: relative;
box-sizing: border-box;
overflow: hidden;
transform: translateY(30px);
}
.card:hover .content {
height: 260px;
padding: 20px;
opacity: 1;
transform: translateY(0);
}
.card .content p {
margin: 0;
}
.card .content .title {
font-size: 20px;
font-weight: 600;
}
.card .content .desc {
font-size: 14px;
font-weight: 100;
opacity: 0.8;
margin-top: 8px;
}
.card .arrow {
padding: 15px;
transform: rotate(-180deg);
transition: all 0.5s;
}
.card:hover .arrow {
transform: rotate(0);
}
.card .arrow span {
font-size: 24px;
}
After attempting to use different classes for each card to enable individual animation, the issue persists