title: How to make text invisable during hover stage
body: <p>im very new to HTML and CSS and have been practising making websites on random things. I have recently encountered a problem during coding my latest website. I have 3 boxes that when hover will grow in height down the page to reveal text to describe the picture. There is text below this. What i am trying to is once one of the boxes is hovered over, i want to make sure the text below can no be seen over the hovered box. Can someone tell me how to do this? </p>
  
  <p>Here is my code</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="cont"&gt;
      &lt;article class="art1"&gt;
          &lt;h2&gt;
              Buddy's Story and Finding His Father
          &lt;/h2&gt;&lt;img class="pic1" src="1.jpg"&gt;&lt;br&gt;
          &lt;br&gt;
          Buddy is a Human Elf, he managed to find his way into santas sack and
          santa accidently took him back to lapland, where he had no choice but
          to become an Elf and make toys in Santas Grotto, but after the
          realisation, buddy tries to find his real dad.
      &lt;/article&gt;
      &lt;article class="art2"&gt;
          &lt;h2&gt;
              With The Help of a Friend...
          &lt;/h2&gt;&lt;img class="pic2" src="3.jpg"&gt;&lt;br&gt;
          &lt;br&gt;
          Buddy is a Human Elf, he managed to find his way into santas sack and
          santa accidently took him back to lapland, where he had no choice but
          to become an Elf and make toys in Santas Grotto, but after the
          realisation, buddy tries to find his real dad.
      &lt;/article&gt;
      &lt;article class="art1"&gt;
          &lt;h2 class="spirit"&gt;
              Can Buddy Bring Back the Christmas Spirit?
          &lt;/h2&gt;&lt;img class="pic2" src="4.jpg"&gt;&lt;br&gt;
          &lt;br&gt;
          Buddy is a Human Elf, he managed to find his way into santas sack and
          santa accidently took him back to lapland, where he had no choice but
          to become an Elf and make toys in Santas Grotto, but after the
          realisation, buddy tries to find his real dad.
      &lt;/article&gt;
      &lt;aside class="artbot"&gt;
          &lt;p class="artbot"&gt;
              Buddy was a baby in an orphanage who stowed away in Santa's sack
              and ended up at the North Pole. Later, as an adult human who
              happened to be raised by elves, Santa allows him to go to New York
              City to find his birth father, Walter Hobbs. Hobbs, on
              &lt;span&gt;Santa's naughty list for being a heartless jerk, had no idea
              that Buddy was even born. Buddy, meanwhile, experiences the
              delights of New York City (and human culture) as only an elf can.
              When Walter's relationship with Buddy interferes with his job, he
              is forced to reevaluate his priorities.&lt;/span&gt;
          &lt;/p&gt;
      &lt;/aside&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      margin:10px auto;
      width:70%;
      paddding:0;
      background-image:url(bgg.jpg);
      max-width:1000px
  }
  
  header {
      background-image:url(banner.png);
      background-repeat:no-repeat;
      border-radius:20px;
      height:200px
  }
  
  .title {
      height:180px;
      width:180px;
      margin-left:40%;
      margin-top:10px
  }
  
  .tagline {
      z-index:1;
      position:relative;
      bottom:95px;
      color:#fff;
      font-weight:900;
      font-size:40px;
      text-align:center;
      color:#000;
      font-family:Tw Cen MT;
      letter-spacing:5px
  }
  
  .snow {
      width:100%;
      max-height:100px;
      z-index:-1;
      border-radius:20px
  }
  
  .cont {
      width:100%;
      height:560px;
  /*background-color:rgb(44,132,255);*/
      background:-moz-linear-gradient(#247cfa 60%,white);
      border-radius:20px;
      position:relative
  }
  
  .pic {
      max-height:600px;
      max-width:900px;
      border-radius:30px;
      min-height:600px;
      min-width:900px
  }
  
  article {
      border-radius:30px;
      margin-bottom:20px
  }
  
  nav {
      width:100%;
      margin-top:-17px;
      margin-left:auto;
      margin-right:auto;
      background-color:#d61415;
      height:60px;
      border-radius:10px
  }
  
  nav ul li {
      float:left;
      padding:0 95px;
      list-style:none;
      color:#fff;
      margin-top:13px;
      font-family:Tw Cen MT;
      font-weight:700;
      font-size:2em;
      transition:color .5s linear 0
  }
  
  nav ul li:nth-child(1) {
      border-right:1px solid #fff
  }
  
  nav ul li:nth-child(2) {
      border-right:1px solid #fff
  }
  
  nav ul li:hover {
      color:#90ee90
  }
  
  article {
      width:29%;
      height:325px;
      display:inline;
      float:left;
      padding:15px;
      color:transparent;
      font-family:Tw Cen MT;
      margin-left:8px;
      -moz-transition-duration:2s;
      max-height:500px;
      color:transparent
  }
  
  .art1 {
      background-color:green
  }
  
  .art2 {
      background-color:#d61415
  }
  
  .art1,.art2 {
      margin-top:10px
  }
  
  .pic1 {
      width:274px;
      height:246px;
      border-radius:10px;
      margin-top:-10px;
      border:2px solid #fff
  }
  
  .pic2 {
      width:274px;
      height:246px;
      border-radius:10px;
      margin-top:-10px;
      border:2px solid #fff
  }
  
  .pic3 {
      width:274px;
      height:246px;
      border-radius:10px;
      margin-top:-10px;
      border:2px solid #fff
  }
  
  h2 {
      padding:10px;
      margin-top:-10px;
      color:#fff
  }
  
  article:hover {
      height:500px;
      width:29%;
      display:inline;
      float:left;
      padding:15px;
      color:#fff;
      font-family:Tw Cen MT;
      margin-left:8px
  }
  
  footer {
      background-color:#247cfa;
      height:250px;
      width:100%;
      float:clear;
      border-radius:5px
  }
  
  h3 {
      position:absolute;
      top:700px
  }
  
  .footpic {
      float:left;
      width:100px;
      height:60px;
      padding:55px;
      margin-top:30px
  }
  
  #firstfootpic {
      margin-left:40px
  }
  
  aside.artbot {
      position:absolute;
      top:375px;
      left:0
  }
  
  p.artbot {
      color:red;
      width:70%;
      font-family:Tw Cen MT;
      margin:0 auto;
      font-size:1.25em;
      text-align:center
  }
  
  span {
      color:blue
  }
  
  .socialpics {
      width:80px;
      height:70px;
      margin-top:20px
  }
  </code></pre>