Advanced Search

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!

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.