Advanced Search

Return to Snippet

Revision: 24917
at March 15, 2010 20:26 by widgetlaboratory
Updated Code 
<style>
/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { 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="page-wrap">

		<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>

Revision: 24916
at March 15, 2010 20:16 by widgetlaboratory
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
	
	<title>CSS Image Switcher</title>
	
<style>
/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { 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="page-wrap">

		<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>
	
</body>

</html>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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!

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
How to Add a Custom Image Gallery with CSS

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
HTML