html - Scale the element (and background) but not the content

Question

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>

Answer 1

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>