CODEWITHSUNDEEP
htmlcss
James Brandon
James Brandon

Reputation: 1400

CSS3 Scale - Prevent from scalling text

So im facing an issue with some code, i have quickly written a simple example to show the effect in jsfiddle: http://jsfiddle.net/0v0syunc/

What i need to do is prevent the TEXT from scaling but been struggling to do this, i used background-size before scale which worked fine but that's not supported in any version of IE including 10/11 - anyone have any ideas?

h2 {
  color: #ffffff;
}
.box {
  background: #000000;
  width: 50%;
  height: 50%;
  text-align: center;
  padding: 10px;
}
.box:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}
<div class="box">
  <h2>TEST TEXT</h2>
</div>

Upvotes: 3

Views: 3201

Answers (2)

Terry
Terry

Reputation: 66103

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>

Upvotes: 2

SW4
SW4

Reputation: 71150

What you're doing seems to be a little obtuse, however given that, you need to scale your child h2 by the inverse ratio (1/1.3):

Demo Fiddle

.box:hover h2 {
  -webkit-transform: scale(0.769);
  -ms-transform: scale(0.769);
  transform: scale(0.769);
}

The issue being that the scale is being applied to the parent and all children, so you need to reverse it for the child to 'nullify' the effect.

Upvotes: 3

Related Questions