I want to create a grid with two columns and when the mouse hovers on the background, I want the background to change position from it's original position to the other position. Here is what I have so far...
.page-container {
display: grid;
width: 100%;
height: 100vh;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
.bg-container {
background-color: brown;
}
.bg-container:hover {
grid-column: 2/3;
}
.login-container {}<div class="page-container">
<div class="bg-container">
</div>
<div class="login-container">
</div>
</div>and I want to apply a translate animation while it moves, how can I achieve this.
