skip to Main Content

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


  1. Add overflow: hidden in your .item1 class. Technically, the <h1> is inside the div, it’s just overflowing on the sides. More on overflow.

    .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;
      overflow: hidden;
    }
    
    .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>
    Login or Signup to reply.
    • All you need to do here is set its parent, which is iteam1 to overflow:hidden. This will keep [welcome] text inside of it and you get your expected output.
    .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;
      /*To keep (welcome in side item1) you just need to below property*/
      overflow: hidden;
    }
    
    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search