Skalieren Sie das Element (und den Hintergrund), aber nicht den Inhalt

Question

Ich versuche, den Hover auf ein Element zu machen, wodurch es um ein paar Prozent größer wird, aber ich möchte den Titel und den Inhalt darin bleiben, wo sie sind . Wenn ich einfach scale(1.05) zum Element hinzufüge, wird auch der Inhalt skaliert. Wenn ich versuche, Maßstab das innere Element zu begegnen mit scale(0.95) wird die Größe wie das Original, aber die Platzierung wird nicht die gleiche sein:

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

Der Inhalt innen absolut so platziert I würde es wahrscheinlich beheben müssen, indem Sie die bottom und left Eigenschaft angeben, aber ich denke, dass es noch etwas Übergang auf dem inneren Element geben wird.

Gibt es einen Weg um dies zu umgehen? Nur um das Element zu erweitern, ohne den Inhalt zu beeinflussen?

Answer 1

Da Kinder der element betroffen sein werden, könnte dies eine gute Alternative sein, die ein Pseudoelement verwendet.

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

Und wenn Sie immer noch die element zu beispielsweise hinzufügen, andere Elemente usw. benötigen, könnte dies eine zweite Option sein

.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

Verschieben Hintergrund Ebene trennen.

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