CSS transform scale, prevent inner text from scalling

Question

Can someone help me stop the inner text here from scaling? its doing my head in and been trying to crack it for a few days now. Don't mind if we have to use some jQuery but no plugins.

CodePen example: http://codepen.io/anon/pen/EaKVQO

CSS:

.image-box{
  width: 300px;
  overflow:hidden;
}
.image {
  text-align: center;
    width:300px;
  height:200px;
    background: url("http://lorempixel.com/300/200");
    background-position:center;
    transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2); /* IE 9 */
} 
.image:hover {
  transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1); /* IE 9 */
} 

h2 {
  padding: 10px 0 0 0;
}
h2, p { 
  margin: 0;
  padding: 0;
  transform: scale(0.8333);
  -moz-transform: scale(0.8333);
  -webkit-transform: scale(0.8333);
  -o-transform: scale(0.8333);
  -ms-transform: scale(0.8333); /* IE 9 */
}

HTML:

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

This is a duplicate of the same question from the same user. Please edit the initial question as required. — SW4, Dec 11 '14 at 10:07

score 1 · Accepted Answer · answered Dec 11 '14 at 10:01

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);
}

Super works a treat!! thanks – James Brandon Dec 11 '14 at 10:12 — James Brandon, Dec 11 '14 at 10:12

score 0 · Answer 2 · answered Dec 11 '14 at 10:02

Try giving font-size:

CSS:

.image-box {
    width: 300px;
    overflow:hidden;
}
.image {
    text-align: center;
    width:300px;
    height:200px;
    background: url("http://lorempixel.com/300/200");
    background-position:center;
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    /* IE 9 */
}
.image:hover {
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    /* IE 9 */
    font-size:20px!important; //here
}
h2 {
    padding: 10px 0 0 0;
    font-size:20px!important; //here
}
h2, p {
    margin: 0;
    padding: 0;
    transform: scale(0.8333);
    -moz-transform: scale(0.8333);
    -webkit-transform: scale(0.8333);
    -o-transform: scale(0.8333);
    -ms-transform: scale(0.8333);
    /* IE 9 */
}

Although, I am not in a favor of using !important but it solves the issue Demo: http://jsfiddle.net/pbdm94zx/

The text seems ot be moving on this one as well, i need ot keep the same size and not move but just the background. — James Brandon, Dec 11 '14 at 10:07

score 0 · Answer 3 · answered Dec 11 '14 at 10:03

You need to animate the scale of the text at the same time as the container but in the opposite direction, so they balance each other.

This means you need apply the same transition settings and then scale it to 1 on hover:

.image h2, .image p { 

  transform: scale(0.8333);
  -moz-transform: scale(0.8333);
  -webkit-transform: scale(0.8333);
  -o-transform: scale(0.8333);
  -ms-transform: scale(0.8333); /* IE 9 */

  /* set transitions */
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
}

.image:hover h2, .image:hover p { 
  /* apply opposite scale */
  transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1); /* IE 9 */
}

Updated Pen

Thanks for the update, it still seems to be moving the text slightly from what i can see... — James Brandon, Dec 11 '14 at 10:05

CSS transform scale, prevent inner text from scalling

3 Answers3