How to Add a Custom Image Gallery with CSS


/ Published in: HTML
Save to your folder(s)

Simply create a new HTML widget and drop this code inside. You can change the CSS to make the gallery wider or alter the buttons, of course... it's all CSS! ;-)

Enjoy!


Copy this code and paste it in your HTML
  1. /*
  2. CSS-Tricks Example
  3. by Chris Coyier
  4. http://css-tricks.com
  5. */
  6.  
  7. * { margin: 0; padding: 0;}
  8.  
  9. body { font: 14px Georgia, serif; }
  10. #page-wrap { width: 400px; height:465px; margin: 20px auto; position: relative; }
  11. a { text-decoration: none; color: ######; }
  12.  
  13. .image-link { display: block; width: 400px; height: 400px; position: absolute; top: 0; left: 0; -moz-border-radius:10px 10px 10px 10px;}
  14.  
  15. #one { background: url(http://static-2.socialgo.com/cache/631/image/7932.jpg) no-repeat; z-index: 2; }
  16. #two { background: url(http://static-2.socialgo.com/cache/631/image/7936.jpg) no-repeat; }
  17. #three { background: url(http://static-2.socialgo.com/cache/631/image/7903.jpg) no-repeat; }
  18. #four { background: url(http://static-2.socialgo.com/cache/631/image/7886.jpg) no-repeat; }
  19.  
  20. #one span { position: absolute; left: 0; bottom: -35px; text-align:center; }
  21. #two span { position: absolute; left: 0; bottom: -70px; text-align:center; }
  22. #three span { position: absolute; left: 203px; bottom: -35px; text-align:center;}
  23. #four span { position: absolute; left: 203px; bottom: -70px; text-align:center;}
  24.  
  25. .image-link span { width: 185px; display: block; height: 19px; padding: 5px; background: #eee; border: 1px solid #ccc; -moz-border-radius:10px 10px 10px 10px; border-radius:10px; }
  26. .image-link:hover { z-index: 100; }
  27. .image-link:hover span { background: #ccc; }
  28.  
  29.  
  30. </head>
  31.  
  32.  
  33. <div id="page-wrap">
  34.  
  35. <div id="switcher-wrap">
  36. <a id="one" class="image-link" href="#"><span>Image One</span></a>
  37. <a id="two" class="image-link" href="#"><span>Image Two</span></a>
  38. <a id="three" class="image-link" href="#"><span>Image Three</span></a>
  39. <a id="four" class="image-link" href="#"><span>Image Four</span></a>
  40. </div>
  41.  
  42. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.