Css3 Scale - Prevent from Scalling Text

CSS transform scale, prevent inner text from scalling

Nest the image and the text separately. I suggest wrapping the text within another element, say .image-meta, and then positioning it absolutely over the .image-box element. The markup will look like this:

<div class="image-box">
    <div class="image"></div>
    <div class="image-meta">
        <h2>TITLE</h2>
        <p>copy is here</p>
    </div>
</div>

For the CSS, we declare relative positioning in the parent container, so that we can absolutely position the .image-meta element, which holds your title and description. However, this will prevent the :hover state from being activated on the image itself (since it is stacked under), so we simply listen to the :hover state on the parent element instead, using .image-box:hover .image.

For the sake of brevity I have removed vendor prefixes, but you can find them in the fiddle code ;)

See demo fiddle here: http://jsfiddle.net/qrkdh4ha/

.image-box{
    width: 300px;
    overflow:hidden;
    position: relative;  /* Added relative positioning */
}
.image {
    text-align: center;
    width:300px;
    height:200px;
    background: url("http://lorempixel.com/300/200");
    background-position:center;
    transition: all 1s ease;
    transform: scale(1.2);
} 
.image-box:hover .image {  /* Listen to :hover on parent element instead */
    transform: scale(1);
} 
.image-meta {  /* Position meta absolutely, and use offsets to cover entire parent element */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
h2 {
    padding: 10px 0 0 0;
}
h2, p { 
    margin: 0;
    padding: 0;
    transform: scale(0.8333);
}

CSS3 Scale - Prevent from scalling text

Seems like you have asked the same question again. I'll rewrite the pre-existing strategy to your duplicate question:

The background and the text should be separated. The background can either be a pseudo-element (most semantically valid), or an empty element (e.g. <div></div>). The choice boils down to whether or not you want to support browsers that allow transitioning of pseudo elements (in the event that you want to use CSS transitions, but in your question you didn't mention it).

I'll use the pseudo-element method. The markup remains the same, but the CSS is slightly modified:

h2 {
    color: #ffffff;
}
.box {
    width: 50%;
    height: 50%;
    text-align: center;
    padding: 10px;
    position: relative;
}
.box::before {
    background-color: #000;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}
.box:hover::before {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

<div class="box">
    <h2>TEST TEXT</h2>
</div>

CSS transform-scale() - How to scale the text without scaling container and keep a proper alignment

If you want to left align your scale text you need to set 'transform-origin: left'

.address h2 {
  font-size-adjust: 0.6;
  transform: scale(0.8, 1);
  text-align: left;
  transform-origin: left; //add this line
}

FYI: If you want scale x and y same so you can use transform: scale(0.8) instead of this 'transform: scale(0.8, 1)'.

you can refer this link for more information
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Example in snippet:

.block3 {
    display: flex;
    background-color: #a8a9ad;
    padding: 50px 30px;
    overflow: none;
    justify-content: space-evenly;

}

.address {
  display: flex;
  text-align: left;
  flex-direction: column;
  justify-content: left;
}

.address span {
  text-align: left;
}

.address p {
  margin: 5px;
  padding-left: 5px;
}

.address h2 {
  font-size-adjust: 0.6;
  transform: scale(0.8, 1);
  text-align: left;
  transform-origin: left; //add this line
}

.terms-of-service {
  text-align: left;
}

<div class="block3">
  <div class="address col-content">
    <span><h2>CORPORATE CLEANING SERVICES LTD.</h2></span>
    <p>#106 – 20285 Stewart Crescent,</p>
    <p>Maple Ridge, BC, V2X 8G1</p><br>
    <p>Toll Free: 1-866-543-4666</p>
    <p>Telephone: 604-465-4699</p>
    <p>Fax: 604-465-4674</p>
  </div>
  <div class="terms-of-service col-content">
    <h2>Terms of Service</h2>
    <p>This site uses cookies. By continuing to use this site you are agreeing to our use of cookies. Please refer to Google's Privacy Terms and Terms of Service to see how cookies are used.</p>
  </div>
</div>

How to prevent inner text resizing in CSS Animation @keyframes?

Do you mean something like that? If so, you are quite there, you just need to set the image position:absolute so the image will be as background, and also: z-index:-1 so the image will not cover and hide the content. Also, in this case you don't need background-size it only for background-image property.

.image {  z-index:-1;  position:absolute;  width:100%;  height:100%;
  animation:img 2s ease-in-out infinite;  animation-direction:alternate;}
@keyframes img {  from { transform:none}  to { transform:scale(1.007,1.007);}}
ul {  color:white;  list-style-type:none;  position:absolute;}

<div class="container-fluid">  <div class="menu">    <ul>      <li>item</li>      <li>item</li>      <li>item</li>    </ul>  </div>  <img class="image" src="https://3.bp.blogspot.com/-uz1WlYUbNxc/Vxok-DC_a7I/AAAAAAAADf8/nsZC7tFimW0P7OrwBdfTiA-_eWQ_VnohACLcB/s1600/13054839_1119372871446695_1522714893_o.jpg"></div>

how to disable scaling of a text field?

Resizing can be disabled using CSS resize: none

<textarea style="resize: none" name="message" id="message" placeholder="Enter your message" autocomplete="off" rows="6"></textarea>

CSS scale and transform making text blury

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>

In a CSS transform, how to prevent shifting of scaled up element when scaling down

The reason that is happening is that you declare transform-origin on the first time when you hover the element.

Solution:
Move transform-origin: left top; from #test:hover to #test.

How to avoid text jerk while scaling anchor in css transition?

The fix for this is adding

.pagination {
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
}

.pagination a {
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

... to your CSS.

However, in your case, because the font is too small and thin, you'll still experience some jump in anti-aliasing, due to sub-pixel rendering at the end of the transform effect. The only effective solution for this case (if changing font-family or font-weight are not acceptable), is to change the font-size to decimal pixels until you find a value where the effect is less visible.

font-size: 14.5px;

... seems to be an improvement in your case. Fiddle here.