Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Photo Gallery Help

    I'm trying to create this photo gallery. The problem I am having is that I would like the photos to flip from the bottom instead of the top. I can't even figure out how it's default is flipping from the top.

    Sample of gallery:
    http://www.cssplay.co.uk/menu/gallery3l.html

    I'm using the exact code there, and it looks like the vertical one.



    Thanks




    Code:
    #gallery {
      padding:0; 
      margin:0; 
      list-style-type:none; 
      overflow:hidden; 
      width:320px; 
      height:425px; 
      border:1px solid #888; 
      background:#fff url(windows/win_back.gif);
      }
    #gallery li {
      float:left;
      }
    #gallery li a {
      display:block; 
      height:30px;
      width:320px; 
      float:left; 
      text-decoration:none; 
      border-bottom:1px solid #fff; 
      cursor:default;
      }
    #gallery li a img {
      width:320px; 
      height:30px; 
      border:0;
      }
    #gallery li a:hover {
      background:#eee; 
      height:239px;
      }
    #gallery li a:hover img {
      height:239px;
      }
    
    
    
    
    
    <ul id="gallery">
    <li><a href="#nogo">
    <img src="windows/win7.jpg" alt="#1" title="#1" /></a></li>
    <li><a href="#nogo">
    <img src="windows/win8.jpg" alt="#2" title="#2" /></a></li>
    <li><a href="#nogo">
    <img src="windows/win9.jpg" alt="#3" title="#3" /></a></li>
    <li><a href="#nogo">
    <img src="windows/win10.jpg" alt="#4" title="#4" /></a></li>
    <li><a href="#nogo">
    <img src="windows/win11.jpg" alt="#5" title="#5" /></a></li>
    <li><a href="#nogo">
    <img src="windows/win12.jpg" alt="#6" title="#6" /></a></li>
    <li><a href="#nogo">
    <img src="windows/win13.jpg" alt="#7" title="#7" /></a></li>
    </ul>

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Increase padding-top value of #gallery in CSS and check


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •