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状态在图像本身上被激活（因为它被堆叠在下面），因此我们只需使用{{1}来监听父元素上的:hover状态}。

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

请在此处查看演示小提琴：http://jsfiddle.net/qrkdh4ha/

.image-box:hover .image

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

CSS转换比例，防止内部文本缩放

3 个答案: