3 Replies Latest reply: Apr 10, 2012 5:31 PM by Nancy O. RSS

    Need help with sliding doors effect!

    matthew stuart Community Member

      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