Scale the element (and background) but not the content

问题

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?

回答1:

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>

回答2:

Move background to separate layer.

.container {
  position: relative;
  display: block;
  width: 300px;
  height: 300px;
  padding: 50px;
  margin: 50px auto;
}
.background {
  position: absolute;
  left: 0;
  top: 0;
  
  height: 100%;
  width: 100%;
  
  transition: all 300ms ease-in-out;
  background: 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) center center;
  background-size: cover;
}
.title {
  position: absolute;
  bottom: 10%;
  left: 0;

  margin: 0 25px;
  
  font-size: 45px;
  line-height: 48px;  
  color: #fff;
  font-weight: 700;
  font-family: sans-serif;
}
.container:hover .background {
  transform: scale(1.05);
}

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

来源：https://stackoverflow.com/questions/36403867/scale-the-element-and-background-but-not-the-content