How to make text invisable during hover stage

Question

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?

Here is my code

HTML

<div class="cont">
    <article class="art1">
        <h2>
            Buddy's Story and Finding His Father
        </h2><img class="pic1" src="1.jpg"><br>
        <br>
        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.
    </article>
    <article class="art2">
        <h2>
            With The Help of a Friend...
        </h2><img class="pic2" src="3.jpg"><br>
        <br>
        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.
    </article>
    <article class="art1">
        <h2 class="spirit">
            Can Buddy Bring Back the Christmas Spirit?
        </h2><img class="pic2" src="4.jpg"><br>
        <br>
        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.
    </article>
    <aside class="artbot">
        <p class="artbot">
            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
            <span>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.</span>
        </p>
    </aside>
</div>

CSS

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
}

Answer 1

Set the article element to be relative positioned and set a high z-index value to them.

article{
    position:relative;
    z-index:100;
}

demo at http://jsfiddle.net/gaby/73wmR/
fullscreen: http://jsfiddle.net/gaby/73wmR/show/