Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css"> 
body {
  font: Arial, Helvetica, sans-serif normal 10px;
  margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
img {border: none;}
.container {
  height: 360px;
  width: 910px;
    display:block;
}
ul.thumb {
  float: left;
  list-style: none;
  margin: 0; padding: 10px;
  width: 360px;
}
ul.thumb li {
  margin: 0; padding: 5px;
  float: left;
  position: relative;
  width: 110px;
  height: 110px;
}
ul.thumb li img {
  width: 100px; height: 100px;
  border: 1px solid #ddd;
  padding: 5px;
  background: #f0f0f0;
  position: absolute;
  left: 0; top: 0;
  -ms-interpolation-mode: bicubic; 
}
ul.thumb li img.hover {
  background:url(http://www.sohtanaka.com/web-design/examples/image-zoom/thumb_bg.png) no-repeat center center;
  border: none;
}
#main_view {
  float: left;
  padding: 9px 0;
  margin-left: -10px;
}
</style> 
</head>
<body>
<div class="container"> 
<ul class="thumb"> 
  <li><a href="http://dummyimage.com/800x450/000/fff000&text=bild1"><img src="http://dummyimage.com/128x72/000/fff&text=bild1" alt="" /></a></li> 
  <li><a href="http://dummyimage.com/800x450/000/fff000&text=bild2"><img src="http://dummyimage.com/128x72/000/fff&text=bild2" alt="" /></a></li> 
 
</ul> 
<div class="main_view"> 
  <a href="http://www.DesignBombs.com" title="Design Bombs - Web Gallery" target="_blank"><img src="http://dummyimage.com/800x450/000/fff000&text=bild1" alt="" /></a><br /> 
  <small style="float: right; color: #999;">Tutorial by <a style="color: #777;" href="http://www.SohTanaka.com">Soh Tanaka</a></small> 
</div> 
  
  
  
  <ul class="thumb"> 
  <li><a href="http://dummyimage.com/800x450/000/fff000&text=bild3"><img src="http://dummyimage.com/128x72/000/fff&text=bild3" alt="" /></a></li> 
  <li><a href="http://dummyimage.com/800x450/000/fff000&text=bild4"><img src="http://dummyimage.com/128x72/000/fff&text=bild4" alt="" /></a></li> 
 
</ul> 
<div class="main_view"> 
  <a href="http://www.DesignBombs.com" title="Design Bombs - Web Gallery" target="_blank"><img src="http://dummyimage.com/800x450/000/fff000&text=bild3" alt="" /></a><br /> 
  <small style="float: right; color: #999;">Tutorial by <a style="color: #777;" href="http://www.SohTanaka.com">Soh Tanaka</a></small> 
</div> 
</div> 
 
 
 
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers