Recently delving into the world of web development with HTML, CSS, and JavaScript, I've encountered an issue that has me stumped. I can't seem to figure out how to move a div upwards when the mouse hovers over it within its containing div.
.profile-button {
background-color: var(--secundairy-dark);
width: 70px;
height: 70px;
border-radius: 35px;
margin: 14px;
cursor: pointer;
transition: transform 0.2s ease, border-radius 0.3s;
}
.profile-button:hover {
transform: scale(1.15);
border-radius: 10px;
}
.profile-button:active {
transform: scale(1);
border-radius: 25px;
transition: transform 0.1s ease, border-radius 0.1s ease;
}
.profile-button:hover>div:nth-child(1),
.profile-button:hover>div:nth-child(2) {
transform: translateY(-10px);
}<header style="background-color: grey;
height: 100px;
width: 100%;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display: flex;
align-items: center;">
<div class="profile-button" style="overflow: hidden;">
<div style="height: 30px;
width: 43px;
background-color: lightblue;
border-top-left-radius: 10px; border-top-right-radius: 10px;
transform: translate(13.5px, 43px);">
</div>
<div style="width: 30px;
height: 30px;
border-radius: 20px;
background-color: lightblue;
transform: translate(17.5px, -17px);
border-color: green;
border-width: 3px;
border-style: solid;">
</div>
</div>
</header>