Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
   <head>
      <script src="//code.jquery.com/jquery.min.js"></script>
      <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      <meta charset="utf-8">
      <title>Multiple Images Hover Click Thingy</title>
   </head>
   <body>
      <div class="container">
         <h1>Locally Hosted Images Will Load Faster</h1>
         <div class="image-space">
            <img src="http://lorempixel.com/200/200/food/" class="img-responsive">
         </div>
         <div class="row">
            <div class="col-sm-4 image-toggle active" data-src="http://lorempixel.com/200/200/food/">
               <p>Image One</p>
            </div>
            <div class="col-sm-4 image-toggle" data-src="http://lorempixel.com/200/200/sports/">
               <p>Image Two</p>
            </div>
            <div class="col-sm-4 image-toggle " data-src="http://lorempixel.com/200/200/city/">
               <p>Image 3</p>
            </div>
         </div>
         <!-- .row -->
      </div>
      <!-- .container -->
   </body>
</html>
Output

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

Dismiss x
public
Bin info
carasmopro
0viewers