Skip navigation
Currently Being Moderated

Need help with sliding doors effect!

Apr 10, 2012 1:50 PM

Tags: #css

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

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points