Transform parent div without affecting its children
Question
I am animating a zoom in effect on the outermost div tag with the class startPageBackground . I only want this animation to affect that div tag and not the text inside of it, and I just can't figure out a solution for it.
What I have on my start page is at first a black background page, then the main background gets loaded. When the main background is loaded, I have a script that replaces the background-image URL, and then adds a class called backgroundZoom to the div tag with class startPageBackground to start the animation. But this currently affects the children inside the div tag, and I want it to only affect the background image.
This is the Html code:
<div class="container-fluid startPageBackground">
<!--Navbar overlay menu-->
<div class="d-flex h-100">
<div class="container justify-content-center align-self-center " style="text-align: center;">
<a class="navbar-brand navbarBtnBrand fadeIn1" href="https://auroradev.nu">
<img class="logoNovanik padding" src="Images/Logo659x106.png" />
</a>
<hr class="align-self-center fadeIn2" id="homeHR" />
<h4 class="brodTextWhite hemParagrafText fadeIn3">Vi är specialister på kundunika mät- och testsystem, kompletta med mekanik, elektronik och datorteknik. Vår specialitet är automatiserad provning med tekniker såsom ultraljud och virvelström. Välkommen.</h4>
<div class="container homePageButtons flex-column">
<a class="startPageLinks rubrikText fadeIn4" href="https://www.auroradev.nu/Tjanster">TJÄNSTER</a>
<a class="startPageLinks rubrikText fadeIn5" href="https://www.auroradev.nu/OmOss">OM OSS</a>
<a class="startPageLinks rubrikText fadeIn6" href="https://www.auroradev.nu/Kontakt">KONTAKT</a>
</div>
</div>
</div>
</div>
And this is the code for the animation:
@keyframes backgroundZoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
Any solutions?
2 answers
solution1
0 2020-05-12 17:02:02
Maybe you can try with adjusting the width and also using background-size property, although I don't know if it's possible because you are only sharing a part of your code, but then you could in CSS do something like:
@keyframes backgroundZoom {
0% {
width: 100%;
}
100% {
width: 110%;
}
}
while having background-size: contain; property for the startPageBackground class.
solution2
0 2020-05-12 17:37:13
As discovered, changing the scale of a <div> element will change the scale of all descendants of that <div> .
In order to keep the descendants from scaling, you can "de-transform" them by giving them all the reciprocal scaling of the parent <div> .
An example:
const wrapper = document.getElementById('wrapper'); const content = document.getElementById('content'); function transform() { wrapper.classList.toggle('scale-up'); content.classList.toggle('scale-down'); }
/* scale up by 1.2 */.scale-up { transform: scale(1.2); } /* scale down by 1/1.2 */.scale-down { transform: scale(0.8333) } #wrapper { border: 1px dashed green; height: 140px; width: 400px; padding: 24px; background-color: #ccc; } #content { border: 1px dashed gray; background-color: white; padding: 0.25rem; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <body class="pt-4 pl-5"> <div id="wrapper"> <div id="content"> #content<br> <button class="btn btn-outline-primary btn-sm" onclick="transform();">Toggle Scaling </button> </div> #wrapper </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.