-2
Good morning I was trying to make a deck of cards all grouped together and when you do Hover with the mouse the card stands up 50px and up and forward z-index to come forward.
My problem is that when I do Hover, all the other cards on the deck go down 50px instead of just being the card that’s on Hover go up, you can tell me what I’m doing wrong?
#treinadores {
position: relative;
width: 80vw;
margin: auto;
padding-left: 150px;
display: block;
height: 700px;
}
.scene {
width: 300px;
height: 300px;
perspective: 600px;
/* margin: auto; */
text-align: center;
font-family: Arial, Helvetica, sans-serif;
transition: all 0.5s;
position: relative;
/* margin-top: 75px; */
display: inline-block;
margin-left: -150px;
border: 10px solid black;
/* margin-bottom: 50px; */
}
.scene:hover {
cursor: pointer;
z-index: 10;
margin-bottom: 50px;
}
.card1 {
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.card2 {
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.card3 {
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.card4 {
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.card5 {
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.card6 {
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card__face--front {
background-color: #bbb;
color: black;
-webkit-clip-path: url(#svgPath);
clip-path: url(#svgPath);
}
.card__face--back {
background-color: #2980b9;
color: white;
width: 300px;
height: 480px;
transform: rotateY(180deg);
-webkit-clip-path: url(#svgPath);
clip-path: url(#svgPath);
}
.card1.is-flipped {
transform: rotateY(180deg);
}
.card2.is-flipped {
transform: rotateY(180deg);
}
.card3.is-flipped {
transform: rotateY(180deg);
}
.card4.is-flipped {
transform: rotateY(180deg);
}
.card5.is-flipped {
transform: rotateY(180deg);
}
.card6.is-flipped {
transform: rotateY(180deg);
}
#imgid {
background-image: url(/img/Ronaldo-teste.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 300px;
height: 300px;
}
#status {
background-color: gray;
position: relative;
display: flow-root;
width: 300px;
height: 180px;
}
svg {
position: absolute;
}
<div id="treinadores">
<!-- scene 1 -->
<div class="scene">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
<clipPath id="svgPath">
<path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
C299.42,61.72,298.64,61.38,297.07,61.27z" />
</clipPath>
</svg>
<div class="card1">
<div class="card__face card__face--front">
<div id="imgid"></div>
<div id="status">
<h1>texto</h1>
<h3>texto</h1>
<h3>texto</h1>
</div>
</div>
<div class="card__face card__face--back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- scene 2 -->
<div class="scene">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
<clipPath id="svgPath">
<path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
C299.42,61.72,298.64,61.38,297.07,61.27z" />
</clipPath>
</svg>
<div class="card2">
<div class="card__face card__face--front">
<div id="imgid"></div>
<div id="status">
<h1>texto</h1>
<h3>texto</h1>
<h3>texto</h1>
</div>
</div>
<div class="card__face card__face--back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- scene 3 -->
<div class="scene">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
<clipPath id="svgPath">
<path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
C299.42,61.72,298.64,61.38,297.07,61.27z" />
</clipPath>
</svg>
<div class="card3">
<div class="card__face card__face--front">
<div id="imgid"></div>
<div id="status">
<h1>texto</h1>
<h3>texto</h1>
<h3>texto</h1>
</div>
</div>
<div class="card__face card__face--back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- scene 4 -->
<div class="scene">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
<clipPath id="svgPath">
<path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
C299.42,61.72,298.64,61.38,297.07,61.27z" />
</clipPath>
</svg>
<div class="card4">
<div class="card__face card__face--front">
<div id="imgid"></div>
<div id="status">
<h1>texto</h1>
<h3>texto</h1>
<h3>texto</h1>
</div>
</div>
<div class="card__face card__face--back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- scene 5 -->
<div class="scene">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
<clipPath id="svgPath">
<path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
C299.42,61.72,298.64,61.38,297.07,61.27z" />
</clipPath>
</svg>
<div class="card5">
<div class="card__face card__face--front">
<div id="imgid"></div>
<div id="status">
<h1>texto</h1>
<h3>texto</h1>
<h3>texto</h1>
</div>
</div>
<div class="card__face card__face--back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- scene 6 -->
<div class="scene">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
<clipPath id="svgPath">
<path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
C299.42,61.72,298.64,61.38,297.07,61.27z" />
</clipPath>
</svg>
<div class="card6">
<div class="card__face card__face--front">
<div id="imgid"></div>
<div id="status">
<h1>texto</h1>
<h3>texto</h1>
<h3>texto</h1>
</div>
</div>
<div class="card__face card__face--back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
</div>
Note, see the whole page for the example below.