I'm trying to make the only container its contents to move but its move also its parent, that contains the background, which is supposed to be fixed (like the whole parent div). How can I fix that?
my code:
#container { font-size: 20px; font-family: Arial; -webkit-background-clip: text; text-fill-color: transparent; transition: .2s; margin-top: 10px; transition: margin 1s;}#container:hover{ margin-top: -3500px; transition: margin 55s linear;}<div style="background-color: rgb(162, 0, 255); height: 400px;"><div id="container"><a href="'#">link1</a> some text...<br><br><a href="'#">link2</a> some more text 2....<br><br><a href="'#">link3</a> some text 3....<br><br><a href="'#">link4</a> some text 3....<br><br><a href="'#">link5</a> some text 3....<br><br><a href="'#">link6</a> some text 3....<br><br><a href="'#">link7</a> some text 3....<br><br><a href="'#">link8</a> some text 3....<br><br></div></div>