javascripthtmlcssreactjssass
Card's borders are messed up. How do I fix this?
When I hover on it, the previous border remains and kind of shifted overlaps it. Do something so that .flip-card-back border replaces the .flip-card-inner border. When I hover on it, the previous border remains and kind of shifted overlaps it. Do something so that .flip-card-back border replaces the .flip-card-inner border. It's something like this:-
Non-hover state:-
Hover state:-
Desired hover state:-
Card.jsx:-
import React from 'react'
import './style.scss'
const Card = () => {
return (
<div className="flip-card">
<div className="flip-card-inner">
<div className="flip-card-front">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="110"
height="110"
x="0"
y="0"
viewBox="0 0 512 512"
style={{ enableBackground: 'new 0 0 512 512' }}
xmlSpace="preserve"
className=""
><g><linearGradient id="a" x1="256" x2="256" y1="17.276" y2="497.276" gradientTransform="matrix(1 0 0 -1 0 513.276)" gradientUnits="userSpaceOnUse"><stop stopOpacity="1" stopColor="#12bee5" offset="0"></stop><stop stopOpacity="1" stopColor="#c071e9" offset="0"></stop><stop stopOpacity="1" stopColor="#6df1b2" offset="0"></stop></linearGradient><path fill="url(#a)" d="m493.7 98.3-80-80c-1.5-1.5-3.5-2.3-5.7-2.3H216c-4.4 0-8 3.6-8 8v56H104c-4.4 0-8 3.6-8 8 0 1.1.2 2.1.6 3.1l23.4 56.2c-8.8 3.9-15.9 10.7-20.1 19.3l-.2-.3C47.3 197.5 16 257.9 16 328c0 34.8 7 78.8 12.9 109.6 6.5 33.9 36.2 58.4 70.7 58.4H488c4.4 0 8-3.6 8-8V104c0-2.1-.8-4.2-2.3-5.7zm-77.7-55L468.7 96H416zM224 32h176v72c0 4.4 3.6 8 8 8h72v240H351.1c.6-8.6.9-16.7.9-24 0-8-.4-16-1.3-24H448c4.4 0 8-3.6 8-8s-3.6-8-8-8h-99.6c-1-5.4-2.2-10.8-3.5-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H339.9c-2-5.5-4.1-10.8-6.5-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H325c-3.2-5.5-6.8-10.9-10.6-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H300.7c-9.6-9.9-20.6-18.6-32.5-25.7l-.2.3c-4.2-8.6-11.3-15.5-20.1-19.3l23.4-56.2c1.7-4.1-.2-8.8-4.3-10.5-1-.4-2-.6-3.1-.6h-40V32zm256 352h-80v-16h80zm-80 48h80v16h-80zm0-16v-16h80v16zm-216 8c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80c-.1 44.2-35.8 79.9-80 80zm168-8h-72v-16h72zm-72 16h72v16h-72zm72-48h-72v-16h72zM252 96l-33.3 80h-69.3L116 96zm-125.8 66.1 10.4 25c1.2 3 4.2 4.9 7.4 4.9h80c3.2 0 6.1-1.9 7.4-4.9l10.4-25c12.1 5.4 17.5 19.6 12.1 31.7-3.9 8.6-12.4 14.2-21.9 14.2h-96c-13.2 0-24-10.7-24-24 0-9.4 5.6-18 14.2-21.9zM44.6 434.6C38.9 404.5 32 361.6 32 328c0-58.9 23.8-110.1 64.2-140.1 2 20.5 19.2 36 39.8 36.1h96c20.6 0 37.8-15.6 39.8-36.1 43.7 33.2 63.8 83.8 64.2 140.1 0 7.2-.3 15.3-1 24h-55.4c.2-2.6.3-5.3.3-8 .1-53.1-42.9-96.1-96-96.2s-96.1 42.9-96.2 96 42.9 96.1 96 96.2c32.2 0 62.4-16.1 80.2-43v83H99.6c-26.8 0-49.9-19.1-55-45.4zM280 464h72v16h-72zm88 16V368h16v112zm32 0v-16h80v16zM176 328c0 4.4 3.6 8 8 8 13.3 0 24 10.8 24 24 0 10.2-6.4 19.2-16 22.6v9.4c0 4.4-3.6 8-8 8s-8-3.6-8-8v-8h-8c-4.4 0-8-3.6-8-8s3.6-8 8-8h16c4.4 0 8-3.6 8-8s-3.6-8-8-8c-13.3 0-24-10.8-24-24 0-10.2 6.4-19.2 16-22.6V296c0-4.4 3.6-8 8-8s8 3.6 8 8v8h8c4.4 0 8 3.6 8 8s-3.6 8-8 8h-16c-4.4 0-8 3.6-8 8zm160-160c0-4.4 3.6-8 8-8h104c4.4 0 8 3.6 8 8s-3.6 8-8 8H344c-4.4 0-8-3.6-8-8zm0-32c0-4.4 3.6-8 8-8h104c4.4 0 8 3.6 8 8s-3.6 8-8 8H344c-4.4 0-8-3.6-8-8z" data-original="url(#a)"></path></g>
</svg>
<p className='front-card-text'>Save Money</p>
</div>
<div className="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
)
}
export default Card
style.scss:-
.flip-card {
background-color: transparent;
width: 340px;
height: 290px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
border: 2px solid #6df1b2;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: transparent;
color: #6df1b2;
font-size: 2.5rem;
padding: 1rem 0;
.front-card-text {
margin: 0 0 10px;
}
}
.flip-card-back {
border: 2px solid white;
color: white;
transform: rotateY(180deg);
}
svg {
padding: 15px;
margin-top: 1rem;
}
Solution
Move the border from flip-card-inner to flip-card-front
I also added a background and border-radius to flip-card-back and removed the padding from flip-card-front
.flip-card {
background-color: transparent;
width: 340px;
height: 290px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: transparent;
color: #6df1b2;
font-size: 2.5rem;
border: 2px solid #6df1b2;
.front-card-text {
margin: 0 0 10px;
}
}
.flip-card-back {
border: 2px solid white;
border-radius: 2rem 0;
color: white;
background-color: black;
transform: rotateY(180deg);
}
svg {
padding: 15px;
margin-top: 1rem;
}
body {
margin: 0 auto;
padding: 2rem;
background-color: black;
}<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="110" height="110" x="0" y="0" viewBox="0 0 512 512" style="enable-background: 'new 0 0 512 512'" xmlSpace="preserve" class="">
<g>
<linearGradient id="a" x1="256" x2="256" y1="17.276" y2="497.276" gradient-transform="matrix(1 0 0 -1 0 513.276)" gradient-units="userSpaceOnUse">
<stop stop-opacity="1" stop-color="#12bee5" offset="0"></stop>
<stop stop-opacity="1" stop-color="#c071e9" offset="0"></stop>
<stop stop-opacity="1" stop-color="#6df1b2" offset="0"></stop>
</linearGradient>
<path fill="url(#a)" d="m493.7 98.3-80-80c-1.5-1.5-3.5-2.3-5.7-2.3H216c-4.4 0-8 3.6-8 8v56H104c-4.4 0-8 3.6-8 8 0 1.1.2 2.1.6 3.1l23.4 56.2c-8.8 3.9-15.9 10.7-20.1 19.3l-.2-.3C47.3 197.5 16 257.9 16 328c0 34.8 7 78.8 12.9 109.6 6.5 33.9 36.2 58.4 70.7 58.4H488c4.4 0 8-3.6 8-8V104c0-2.1-.8-4.2-2.3-5.7zm-77.7-55L468.7 96H416zM224 32h176v72c0 4.4 3.6 8 8 8h72v240H351.1c.6-8.6.9-16.7.9-24 0-8-.4-16-1.3-24H448c4.4 0 8-3.6 8-8s-3.6-8-8-8h-99.6c-1-5.4-2.2-10.8-3.5-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H339.9c-2-5.5-4.1-10.8-6.5-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H325c-3.2-5.5-6.8-10.9-10.6-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H300.7c-9.6-9.9-20.6-18.6-32.5-25.7l-.2.3c-4.2-8.6-11.3-15.5-20.1-19.3l23.4-56.2c1.7-4.1-.2-8.8-4.3-10.5-1-.4-2-.6-3.1-.6h-40V32zm256 352h-80v-16h80zm-80 48h80v16h-80zm0-16v-16h80v16zm-216 8c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80c-.1 44.2-35.8 79.9-80 80zm168-8h-72v-16h72zm-72 16h72v16h-72zm72-48h-72v-16h72zM252 96l-33.3 80h-69.3L116 96zm-125.8 66.1 10.4 25c1.2 3 4.2 4.9 7.4 4.9h80c3.2 0 6.1-1.9 7.4-4.9l10.4-25c12.1 5.4 17.5 19.6 12.1 31.7-3.9 8.6-12.4 14.2-21.9 14.2h-96c-13.2 0-24-10.7-24-24 0-9.4 5.6-18 14.2-21.9zM44.6 434.6C38.9 404.5 32 361.6 32 328c0-58.9 23.8-110.1 64.2-140.1 2 20.5 19.2 36 39.8 36.1h96c20.6 0 37.8-15.6 39.8-36.1 43.7 33.2 63.8 83.8 64.2 140.1 0 7.2-.3 15.3-1 24h-55.4c.2-2.6.3-5.3.3-8 .1-53.1-42.9-96.1-96-96.2s-96.1 42.9-96.2 96 42.9 96.1 96 96.2c32.2 0 62.4-16.1 80.2-43v83H99.6c-26.8 0-49.9-19.1-55-45.4zM280 464h72v16h-72zm88 16V368h16v112zm32 0v-16h80v16zM176 328c0 4.4 3.6 8 8 8 13.3 0 24 10.8 24 24 0 10.2-6.4 19.2-16 22.6v9.4c0 4.4-3.6 8-8 8s-8-3.6-8-8v-8h-8c-4.4 0-8-3.6-8-8s3.6-8 8-8h16c4.4 0 8-3.6 8-8s-3.6-8-8-8c-13.3 0-24-10.8-24-24 0-10.2 6.4-19.2 16-22.6V296c0-4.4 3.6-8 8-8s8 3.6 8 8v8h8c4.4 0 8 3.6 8 8s-3.6 8-8 8h-16c-4.4 0-8 3.6-8 8zm160-160c0-4.4 3.6-8 8-8h104c4.4 0 8 3.6 8 8s-3.6 8-8 8H344c-4.4 0-8-3.6-8-8zm0-32c0-4.4 3.6-8 8-8h104c4.4 0 8 3.6 8 8s-3.6 8-8 8H344c-4.4 0-8-3.6-8-8z" data-original="url(#a)"></path>
</g>
</svg>
<p class='front-card-text'>Save Money</p>
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices