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/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>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  .thumbnail_content { padding-top: 10px; overflow: hidden;}
    .thumbnail_content img, .original_area img {
     cursor: pointer;
    }
  .original_area img{
    position:absolute;
  }
    .thumbnail_content img {
     float: left;
     margin-right: 5px;
    width:100px;
    }
  .original_area { position: relative; height:310px; }
  
</style>
</head>
<body>
  
​
​
    <div class="gallery_area">
        <div class="original_area">
            <img src="http://placehold.it/565x300/cf5" />
        </div>
     
        <div class="thumbnail_content">
            <img src="http://placehold.it/565x300/cf5" alt="1st image description" />
            <img src="http://placehold.it/565x300/f0f" alt="2nd image description" />
            <img src="http://placehold.it/565x300/444" alt="3rd image description" />
        </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