14 Comments

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

11. It is possible to make available to all browsers. 
    Use -webkit-transition and -moz-transition and so on.
    Depending on what kind of browsers you want to view.

12. XP in 2013 Madness!!!!

13. this code withut java?

14. Thanks

    It works in Firefox and Opera.
    But not in Chrome and IE.
    🙁

Comments are closed.