I have a unique situation that I'm hoping to get some help with. I've been trying to create an effect where I move text away and lift up a gray box, and then when my mouse moves away from the gray box, the box goes down first before the text moves back. The issue is that currently, the text moves back first which isn't the desired transition order. Is there a way to reverse this transition order for when it reverts back to normal? Below is the CSS code I've been using:
.doge{
font-size: 50px;
font-family: "Comic Sans MS";
text-align: center;
background-image: linear-gradient(#c6a65f 70%,#cbc595 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-position: left;
transition: 1.6s;
}
.dogediv{
width: 537px;
height: 529px;
background-image: url("https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg");
background-position: right;
position: relative;
}
.div2 {
background-color: gray;
height: 100%;
transition: 5s;
transition-delay: 1s;
}
.div2:hover > .doge{
transform: translateX(550px);
}
.div2:hover {
height: 10px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Home of the Doge</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="dogediv">
<div class="div2" style="background-color: gray">
<h1 class="doge">Welcome to the Home of the Doge</h1>
</div>
</div>
</body>
</html>