How To Make A Simple HTML/CSS Gallery

10 Comments on “How To Make A Simple HTML/CSS Gallery”

1. mwa! Thank you for this!

2. No use since it dosn't show how it works, it only shows the code.

3. Thanks for the video. Here are the codes for anyone needing them.
   _________________________________________________
   CSS:
   ________________________________________________
   .hoverbox{
   cursor: default;
   list-style:none;}

   .hoverbox a{
   cursor: default;
   }

   .hoverbox a .preview{
   display:none;
   }

   .hoverbox a:hover .preview{
   display:block;
   position: absolute;
   top: -330px;
   left: -45px;
   z-index:1;
   }

   .hoberbox img{
   backgrounnd:#fff;
   boder-color #aaa #ccc #ddd #bbb;
   border-style:solid;
   border-width: 1px;
   color:inherit;
   padding: 2px;
   vertical-align:top;
   width:175px;
   }

   .hoverbox li{
   backgrounnd:#eee;
   boder-color #ddd #bbb #aaa #ccc;
   border-style:solid;
   border-width: 1px;
   color:inherit;
   display:inline;
   float:left;
   margin:3px;
   padding:5px;
   position:relative;
   }

   .hoverbox .preview{
   border-color:#000;
   width:300px;
   }

   .hoverbox a{
   position:relative;
   }

   .hoverbox a:hover{
   display:block;
   font-size:100%;
   z-index:1;
   }

   .hoverbox a:hover .preview{
   top: -38px;
   left: -50px;
   }

   hoverbox li{
   position:static;
   }

   ____________________________________________________________
   HTML:
   ____________________________________________________________
   <div id="gal">

   <h1>Gallery</h1>
   <hr>
   <ul class="hoverbox">

   <li>
   <a href="1.jpg"><img src="1.jpg" alt="text"/>
   <img src="1.jpg" alt="text" class="preview"/></a>
   </li>
   <li>
   <a href="2.jpg"><img src="1.jpg" alt="text"/>
   <img src="2.jpg" alt="text" class="preview"/></a>
   </li>
   <li>
   <a href="3.jpg"><img src="1.jpg" alt="text"/>
   <img src="3.jpg" alt="text" class="preview"/></a>
   </li>
   <li>
   <a href="4.jpg"><img src="1.jpg" alt="text"/>
   <img src="4.jpg" alt="text" class="preview"/></a>
   </li>
   <li>
   <a href="5.jpg"><img src="1.jpg" alt="text"/>
   <img src="5.jpg" alt="text" class="preview"/></a>
   </li>
   <li>
   <a href="6.jpg"><img src="1.jpg" alt="text"/>
   <img src="6.jpg" alt="text" class="preview"/></a>
   </li>

4. can you put the code/tags so that we can paste it directly? xdd

5. Can you post the css txt so I can copy past it? i just typed it and was copying it and lost it. now it dont want to rewrite it.

6. its not working in any browser like, chrome, ie and firefox… :/
   please help me on doing this.. :(

7. This helped me so much! Thank You!

8. Awesome tutorial. Thanks for posting!

9. ok. very easy simple gallery. thank you. question? how do you get it to go horizontal instead of vertical?
   I copied everything exactly and my gallery goes vertically?

10. Please put source code in description or comment 😉

    Thanks

Comments are closed.