缩放元素（和背景），但不缩放内容(Scale the element (and background) but not the content)

编程入门行业动态更新时间:2024-10-26 13:32:25

我试图将鼠标悬停在一个元素上，使其变大几个百分点，但我希望内部的标题和内容保持原样。如果我只是向元素添加scale(1.05) ，内容也会缩放。如果我尝试使用scale(0.95)来对比缩放内部元素，则尺寸将与原始尺寸相同，但展示位置将不相同：

.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属性来修复它，但我认为内部元素仍然会有一些转换。  
 有没有办法解决？ 只是为了扩展元素而不影响内容？ 
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> 
  
 
 
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子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来添加其他元素等，这可能是第二个选项  
 
 
  
  .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> 
  
 
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> 
  
 
 
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>