Hi, I have got this CSS sliding doors effect based on an Adobe video, but I can't get the effect to work vertically, I can only get it to go left or right. Bottom and top don't work. How do I get it to transition downwards?

<style type="text/css" media="screen">

.teaser {

          width: 70px;

          height: 30px;

          overflow: hidden;

          position: relative;

          cursor: pointer;

}

.teaser img {

          position: absolute;

          top: 0;

          left: 0;

          width: 80;

}

#teaser-wrap .teaser {

          float: left;

}

.teaser img {

          -webkit-transition: left .5s linear;

}

.teaser:hover img {

          left: -200px;

}

</style>

          <div id="teaser-wrap">

                    <div class="teaser">

                         <img src="images/bg_li.gif" alt="photo" />

                              <p><a href="#">Read More...</a>

                    </div>

                    <div class="teaser">

                         <img src="images/bg_li.gif" alt="photo" width="70" />

                              <p><a href="#">Home</a>

                    </div>

                    <div class="teaser">

                         <img src="images/bg_li.gif" alt="photo" />

                              <p><a href="#">About us</a>

                    </div>

                    <div class="teaser">

                         <img src="images/bg_li.gif" alt="photo" />

                              <p><a href="#">Services</a>

                    </div>

                    <div class="teaser">

                         <img src="images/bg_li.gif" alt="photo" />

                              <p><a href="#">Contact us</a>

                    </div>

          </div>

Thanks

Mat