I have a box that scales to 1.1x when hovered, but because the text becomes blurry, I used filter: blur(0) and that solved the issue (only to FireFox) . By using filter: blur(0) on the parent, the box-shadow property on the children elements stopped working.
I tried using a before and after pseudo-element but that didn't work either. Is there anything I can do to fix my issue?
function myFunction(e) {
if (e.style.transform === "rotateY(180deg)") e.style.transform = "rotateY(0)";
else e.style.transform = "rotateY(180deg)";
}body{background:mistyrose; padding: 50px;}
.r_card {
height: 250px;
width: 250px;
perspective: 500px;
transition: transform 0.25s;
filter: blur(0);
}
.r_card:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.r_card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: all .2s ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.r_card-inner .r_card-header h3 {
font-size: 26px;
}
.r_card-inner .r_card-header p {
margin: 13px 0;
}
.r_card-inner .r_card-description {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.r_card-inner .r_card-description p {
margin: 15px 0;
}
.r_card:hover .r_card-inner {
box-shadow: 2px 2px 1px -3px black;
}
.r_card-front,
.r_card-back {
background: #ffffff;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding: 10px 30px 30px;
border-bottom: 5px solid #E66343;
}
.r_card-front {
color: black;
transform: rotateY(0deg);
}
.r_card-front .r_card-links {
display: flex;
justify-content: space-around;
margin-top: 5px;
font-weight: 600;
font-size: 15px;
}
.r_card-front .r_card-links a {
cursor: pointer;
padding: 6px 10px;
color: #ffffff;
border-radius: 2px;
background: #E66343;
}
.r_card-back {
transform: rotateY(180deg);
}
.r_card3 {
display: grid;
grid-template: repeat(3, 1fr)/auto;
}<div class="r_card"><div class="r_card-inner" onclick="myFunction(this)" style="transform: rotateY(0deg);"><div class="r_card-front r_card3"><div class="r_card-header"><h3>Standard</h3><p>Standard</p></div><div class="r_card-image"><img src="#">></div><div class="r_card-description"><p>P Tag</p><div class="r_card-links"><a href="#">More Info</a><br><a href="#">More Info</a></div></div></div><div class="r_card-back"><h1>Peter</h1><p>Art.</p><p>Ext</p></div></div></div>Thank you.
Chavez