Posted By

widgetlaboratory on 03/15/10

Tagged

Versions (?)

Last Edited at 03/15/10 08:16pm

Statistics

Viewed 1557 times

Favorited by 0 user(s)

Related snippets

How to Add a Custom Image Gallery with CSS

/ Published in: HTML

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!

Highlighted TextExpand

* { margin: 0; padding: 0;}

body { font: 14px Georgia, serif; }
#page-wrap { width: 400px; height:465px; margin: 20px auto; position: relative; }
a { text-decoration: none; color: ######; }

.image-link { display: block; width: 400px; height: 400px; position: absolute; top: 0; left: 0; -moz-border-radius:10px 10px 10px 10px;}

#one { background: url(http://static-2.socialgo.com/cache/631/image/7932.jpg) no-repeat; z-index: 2; }
#two { background: url(http://static-2.socialgo.com/cache/631/image/7936.jpg) no-repeat; }
#three { background: url(http://static-2.socialgo.com/cache/631/image/7903.jpg) no-repeat; }
#four { background: url(http://static-2.socialgo.com/cache/631/image/7886.jpg) no-repeat; }

#one span { position: absolute; left: 0; bottom: -35px; text-align:center; }
#two span { position: absolute; left: 0; bottom: -70px; text-align:center; }
#three span { position: absolute; left: 203px; bottom: -35px; text-align:center;}
#four span { position: absolute; left: 203px; bottom: -70px; text-align:center;}

.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; }
.image-link:hover { z-index: 100; }
.image-link:hover span { background: #ccc; }

</style>

</head>

<body>

<div id="switcher-wrap">
    		<a id="one" class="image-link" href="#"><span>Image One</span></a>
    		<a id="two" class="image-link" href="#"><span>Image Two</span></a>
    		<a id="three" class="image-link" href="#"><span>Image Three</span></a>
    		<a id="four" class="image-link" href="#"><span>Image Four</span></a>
		</div>
		
	</div>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.