缩放元素(和背景)但不缩放内容 [英] Scale the element (and background) but not the content

问题描述

我试图将鼠标悬停在某个元素上，使其增大几个百分点，但我想将标题和内容保留在原处.如果我只是将 scale(1.05)添加到元素，则内容也会缩放.如果我尝试使用 scale(0.95)反比例缩放内部元素，则其尺寸将与原始尺寸相同，但放置位置将有所不同:

I'm trying to make the hover on an element, making it bigger by few percent, but I'd like to have the title and the contents inside stay where they are. If I just add scale(1.05) to the element, the contents will scale as well. If I try to counter scale the inner element with scale(0.95) the size will be like the original, but the placement won't be the same:

.container {
  display: block;
  width: 100%;
  padding: 50px;
}
.element {
  height: 562px;
  width: 590px;
  display: inline-block;
  position: relative;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  background-image: url(https://images.unsplash.com/photo-1451906278231-17b8ff0a8880?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);
  background-size: cover;
  background-position: center center;
}
.title {
  font-size: 45px;
  line-height: 48px;
  bottom: 10%;
  position: absolute;
  margin: 0 25px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14);
  font-weight: 700;
  font-family: sans-serif;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.element:hover {
  transform: scale(1.05);
  z-index: 10;
}
.element:hover .title {
  transform: scale(0.95);
}

<div class="container">
  <div class="element">
    <div class="title">This is the big title.</div>
  </div>
</div>

里面的内容是绝对放置的，所以我可能必须通过指定 bottom 和 left 属性来修复它，但是我认为仍然会有一些过渡在内部元素上.

The content inside is absolutely placed so I'd probably have to fix it by specifying the bottom and left property, but I think that there will still be some transition on the inner element.

有什么办法解决吗?只是在不影响内容的情况下扩展元素?

Is there any way around this? Just to expand the element without affecting the contents?

推荐答案

由于 element 的子元素将受到影响，因此使用伪元素可能是一个不错的选择.

Since children of the element will be affected, this might be a good alternative, using a pseudo element.

.container {
  display: block;
  width: 100%;
  padding: 50px;
}
.element {
  position: relative;
  height: 562px;
  width: 590px;
  display: inline-block;
}
.element:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: inline-block;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  background-image: url(https://images.unsplash.com/photo-1451906278231-17b8ff0a8880?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);
  background-size: cover;
  background-position: center center;
}
.title {
  font-size: 45px;
  line-height: 48px;
  bottom: 10%;
  position: absolute;
  margin: 0 25px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14);
  font-weight: 700;
  font-family: sans-serif;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.element:hover:before {
  transform: scale(1.05);
}

<div class="container">
  <div class="element">
    <div class="title">This is the big title.</div>
  </div>
</div>

如果您仍然需要 element 来添加其他元素等，这可能是第二个选择

And if you still need the element to for example add other elements etc., this might be a second option

.container {
  display: block;
  width: 100%;
  padding: 50px;
}
.element {
  position: relative;
  height: 562px;
  width: 590px;
  display: inline-block;
}
.inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: inline-block;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  background-image: url(https://images.unsplash.com/photo-1451906278231-17b8ff0a8880?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);
  background-size: cover;
  background-position: center center;
}
.title {
  font-size: 45px;
  line-height: 48px;
  bottom: 10%;
  position: absolute;
  margin: 0 25px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.14);
  font-weight: 700;
  font-family: sans-serif;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.element:hover .inner {
  transform: scale(1.05);
}

<div class="container">
  <div class="element">
    <div class="inner"></div>
    <div class="title">This is the big title.</div>
  </div>
</div>

这篇关于缩放元素(和背景)但不缩放内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！