CSS scale and transform making text blury - html

Question

I have some flip cards and when you hover over the flip card, the card flips and enlarges (scales). However I don't want to the text inside the hovered card to scale so I put the text inside a child div. (I only want the parent card background to scale).
How can I stop my text and content from scaling and going blurry? I've tried to reset my child div to 1/2 of the scale size to reset it but it does not work.
HTML
<div class="c-flip-card">
<div class="c-flip-card__inner">
<div class="c-flip-card__front"><img src="img_avatar.png" alt="Avatar"</div>
<div class="c-flip-card__back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
SASS
.c-flip-card {
background-color: transparent;
width: 180px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Do an horizontal flip when you move the mouse over the flip box container */
&:hover {
z-index: 10;
position: relative;
}
&:hover .c-flip-card__inner {
transform: rotateY(180deg) scale(1.4);
}
/* This container is needed to position the front and back side */
.c-flip-card__inner {
cursor:pointer;
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Position the front and back side */
.c-flip-card__front, .c-flip-card__back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.c-flip-card__front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.c-flip-card__back {
background-color: red;
color: white;
transform: rotateY(180deg);
}
.abc{
transform: scale(0.7);
h1, p{
color:#000;
}
}
}
jsfiddle

Answer 1

Edit
I think I found a workaround : Don't use scale() !
.c-flip-card .c-flip-card__inner {
transition: all 0.8s;
}
.c-flip-card:hover .c-flip-card__inner {
transform: rotateY(180deg) translate3d(40px,-40px,0);
/* Just change the width and height to 140% and have them transition
I used translate3d to position the card the same way scale() does */
width: 140%;
height: 140%;
}
And if you want to get the same positioning as scale() produce, you can add something like translate3d(40px,-40px,0) to your transform.
This way you don't have to manage the size of the text, the effect is the same (except for a little transition on the text position), and there is no bluriness.
.c-flip-card {
margin: 50px;
background-color: transparent;
width: 180px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.c-flip-card:hover {
z-index: 10;
position: relative;
}
.c-flip-card:hover .c-flip-card__inner {
transform: rotateY(180deg) translate3d(40px,-40px,0);
width: 140%;
height: 140%;
}
.c-flip-card .c-flip-card__inner {
cursor: pointer;
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: all 0.8s;
transform-style: preserve-3d;
}
.c-flip-card .c-flip-card__front,
.c-flip-card .c-flip-card__back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.c-flip-card .c-flip-card__front {
background-color: #bbb;
color: black;
}
.c-flip-card .c-flip-card__back {
background-color: red;
color: white;
transform: rotateY(180deg);
}
<div class="c-flip-card">
<div class="c-flip-card__inner">
<div class="c-flip-card__front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="c-flip-card__back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
Original
Putting the content of your back card inside a div and applying scale(0.7) on it seems to work but it really doesn't look good on the first hover.
<div class="c-flip-card__back">
<div class="notScale">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
.c-flip-card:hover .notScale {
transform: scale(0.7);
}
So instead of applying transform on your text, since it's only shown on hover, why not simply change the font size for exemple using calc() and variables :
/* define variables for p and h1 */
body {
--sizeP : 16px;
--sizeH1 : calc(2.5 * var(--sizeP));
}
/* apply those variable one "regular" h1 and p */
h1 {
font-size: var(--sizeH1);
}
p{
font-size: var(--sizeP);
}
/* "scale" down the text for the backside by a factor of .7 */
.c-flip-card .c-flip-card__back h1{
font-size: calc(.7 * var(--sizeH1));
}
.c-flip-card .c-flip-card__back p{
font-size: calc(.7 * var(--sizeP));
}
For the blury part I did get some imporvement (though it's not enough for chrome) by adding :
.c-flip-card {
-webkit-filter: blur(0);
filter: blur(0);
}
body {
--sizeP: 16px;
--sizeH1: calc(2.5 * var(--sizeP));
}
h1 {
font-size: var(--sizeH1);
}
p {
font-size: var(--sizeP);
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.c-flip-card {
margin: 50px;
background-color: transparent;
width: 180px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Do an horizontal flip when you move the mouse over the flip box container */
/* This container is needed to position the front and back side */
/* Position the front and back side */
/* Style the front side (fallback if image is missing) */
/* Style the back side */
-webkit-filter: blur(0);
filter: blur(0);
}
.c-flip-card:hover {
z-index: 10;
position: relative;
}
.c-flip-card:hover .c-flip-card__inner {
transform: rotateY(180deg) scale(1.39);
}
.c-flip-card .c-flip-card__inner {
cursor: pointer;
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.c-flip-card .c-flip-card__front,
.c-flip-card .c-flip-card__back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.c-flip-card .c-flip-card__front {
background-color: #bbb;
color: black;
}
.c-flip-card .c-flip-card__back {
background-color: red;
color: white;
transform: rotateY(180deg);
}
.c-flip-card .c-flip-card__back h1 {
font-size: calc(.7 * var(--sizeH1));
}
.c-flip-card .c-flip-card__back p {
font-size: calc(.7 * var(--sizeP));
}
<div class="c-flip-card">
<div class="c-flip-card__inner">
<div class="c-flip-card__front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="c-flip-card__back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
For chrome I tried every solution from here and here but wasn't able to get a descent result.
The only one that worked for the blury part on chrome was :
#supports (zoom : 140%) {
.c-flip-card:hover {
zoom : 140%;
transform: translate3d(-40px,-40px,0);
}
.c-flip-card:hover .c-flip-card__inner {
transform: rotateY(180deg) scale(1);
}
.c-flip-card .c-flip-card__back h1{
font-size: calc(var(--sizeH1));
}
.c-flip-card .c-flip-card__back p{
font-size: calc(var(--sizeP));
}
}
But I wasn't able to transition the property zoom so the effect isn't great.

Answer 2

I followed Amarjits solutions and added scale:1.1 to .c-flip-card__back and this is the best result, however it is blurry using Saffari
.c-flip-card__back {
background-color: red;
color: white;
transform: rotateY(180deg) scale(1.1);
}

Answer 3

I found a better solution. Just don't use scaling on the back card, so the animation just tweens as the front card fades out it just shows the back card
This transitions around half way creates the illusion of it scaling when in fact it's just showing a div at set height and width.
It works in Chrome and Saffari and text is not blurry
.mycont{
/* How pronounced should the 3D effects be */
perspective: 500;
-webkit-perspective: 500;
-moz-perspective: 500;
-ms-perspective: 500;
-o-perspective: 500;
width:100%;
height:245px;
position:relative;
/*Some UI */
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-ms-border-radius:6px;
-o-border-radius:6px;
font-size:28px;
line-height:150px;
vertical-align:middle;
cursor:pointer;
}
.box-front,.box-back{
/* Enable 3D transforms */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
width:100%;
height:100%;
position:absolute;
background-color:#0090d9;
/* Animate the transitions */
-webkit-transition:0.8s; text-align:center;
-moz-transition:0.8s; text-align:center;
-ms-transition:0.8s; text-align:center;
-o-transition:0.8s; text-align:center;
transition:0.8s; text-align:center;
color:#FFF;
border-radius:5px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-ms-border-radius:6px;
-o-border-radius:6px;
}
.box-back{
/* The back side is flipped 180 deg by default */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
background-color:#f35958;
}
.mycont:hover .box-front{
/* When the mycont is hovered, flip the front side and hide it .. */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
}
.mycont:hover .box-back{
/* .. at the same time flip the back side into visibility */
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
margin-left: -0%;
margin-top: -10%;
width: 300px;
height:430px;
}
<div style="width:300px; margin-top:100px; margin-left:100px;">
<div class="mycont">
<div class="box-front">Front :)</div>
<div class="box-back">
rtrtrtrt
</div>
</div>
</div>