I want the welcome to appear from the left side of the .item1 div and disappear from its right side.
Right now, it starts from the page itself and doesn’t behave like it’s inside a box.
It acts like it’s relative to the root container rather than its own parent box which is class .item1 .
.inAnime {
background-color: pink;
color: red;
padding: 5px;
position: relative;
z-index: 0;
}
.inAnime {
animation-name: rotate;
animation-duration: 15s;
animation-direction: normal;
}
@keyframes rotate {
0% {
left: -30%;
}
100% {
left: 110%;
}
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: menu;
}
.item3 {
grid-area: main;
}
.item4 {
grid-area: right;
}
.item5 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="animation.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Grid Test</title>
</head>
<header>
</header>
<body>
<div class="grid-container">
<div class="item1">
<h1 class="inAnime">Welcome !!!</h1>
</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
2
Answers
Add
overflow: hidden
in your.item1
class. Technically, the<h1>
is inside the div, it’s just overflowing on the sides. More onoverflow
.iteam1
tooverflow:hidden
. This will keep [welcome] text inside of it and you get your expected output.