要素（と背景）はスケールしますが、コンテンツはスケールしません

Question

要素上にホバーを作成しようとしていますが、それは数パーセント大きくなりますが、タイトルと内容をどこに残しておきたいですか。要素にscale(1.05)を追加するだけで、コンテンツの縮尺も変わります。

.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>

コンテンツ内の絶対に私は置かれている：私はサイズが元のようになりますが、配置は同じではありませんscale(0.95)と内側の要素をスケーリング対抗しようとした場合bottomとleftというプロパティを指定して修正する必要があるかもしれませんが、内部要素にはまだ移行があると思います。

これを回避する手段はありますか？内容に影響を与えずに要素を展開するだけですか？

Answer 1

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が必要な場合は、他の要素などを追加し、この2番目のオプション

.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>

Answer 2

移動の背景であるかもしれませんレイヤーを分離する。

.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>