CSS变换比例，防止内部文本缩放[重复]

Question

有人可以帮我阻止这里的内部文本缩放吗？它让我头疼，几天来一直试图破解它。如果我们必须使用一些 jQuery 但没有插件，请不要介意。

CodePen 示例：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>  

Answer 1

分别嵌套图像和文本。我建议将文本包装在另一个元素中，比如.image-meta，然后将其绝对定位在.image-box 元素上。标记将如下所示：

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

对于 CSS，我们在父容器中声明相对定位，以便我们可以绝对定位 .image-meta 元素，该元素包含您的标题和描述。然而，这将阻止:hover 状态在图像本身上被激活（因为它被堆叠在下面），所以我们只需使用.image-box:hover .image 来监听父元素上的:hover 状态。

为简洁起见，我删除了供应商前缀，但您可以在小提琴代码中找到它们；)

在此处查看演示小提琴：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);
}

Answer 2

尝试给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 */
}

虽然我不赞成使用!important，但它解决了问题 演示：http://jsfiddle.net/pbdm94zx/

Answer 3

您需要同时为容器设置动画比例，但方向相反，以便它们相互平衡。

这意味着您需要应用相同的过渡设置，然后在悬停时将其缩放为 1：

.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