title: Hovering mouse to trigger animation in specifc distance from the edge in html via CSS
body: <p>I'm trying to apply a sliding animation on the box I created via  with some help from  css. The box is hidden at first but when the mouse hovers to the that area, the box will slide to its position. Because the box is big 600px, I tried the following to trigger the animation when the mouse is pointed at about 40 px from the edge of the browser: </p>
  
  <p>CSS:</p>
  
  <pre><code>.lumpia-wrapper {
     position: relative;
     overflow: hidden;
     width: 100%;    
     height: 100%; 
  }
  
  
  .box {
      width: 600px;
      height: 600px
      background-color=blue;
  }
  
  #reveal  {
      position:absolute;
      top:-100%;
     transition: 5s;
  }
  
  .box2{
      width: 40px;
      height: 600px; 
     border: 4px solid black;
  }
  
  .box2:hover ~ .box:hover #reveal{
      top:0;
      transition: 5s;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <p><strong>...</strong></p>
  
  <pre><code>&lt;div class=lumpia-wrapper&gt;
  &lt;div class="box" id="reveal&gt;Once upon the time...&lt;/div&gt;
  &lt;div class="box2&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>...</strong></p>
  
  <p>IT Did not work...</p>
  
  <p>What have I done wrong? Is there something missing to make it work?</p>