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>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<h1>CSS Image Tint</h1>
  
  <p>Hover over a photo to see the tint (<a href="http://www.impressivewebs.com/?p=4804">original article</a>)</p>
  
  <div class="wrap">
​
      <img src="http://cdn.impressivewebs.com/2011-11/greece001.jpg" alt="" width="400" height="260">
    
      <img src="http://cdn.impressivewebs.com/2011-11/greece002.jpg" alt="" width="400" height="260">
    
      <img src="http://cdn.impressivewebs.com/2011-11/greece003.jpg" alt="" width="400" height="260">
    
      <img src="http://cdn.impressivewebs.com/2011-11/greece004.jpg" alt="" width="400" height="260">
    
      <img src="http://cdn.impressivewebs.com/2011-11/greece005.jpg" alt="" width="400" height="260">
    
      <img src="http://cdn.impressivewebs.com/2011-11/greece006.jpg" alt="" width="400" height="260">
    
  </div><!-- .wrap -->
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</body>
</html>
 
article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; margin: 0; }
  
  h1 {
    font-family: sans-serif;
    font-size: 2em;
    margin: 20px 0 0 0;
    text-align: center;
  }
​
  p {
    padding: 10px 0 0;
    color: #222;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
  }
  
  .wrap {
    overflow: hidden;
    width: 840px;
    margin: auto;
  }
  
  .tint {
    overflow: hidden;
    float: left;
    background: blue;
    margin: 0 20px 20px 0;
  }
  
  .t2 {
    background: red;
  }
  
  .t3 {
    background: green;
  }
  
  .t4 {
    background: purple;
  }
  
  .t5 {
    background: yellow;
  }
  
  .t6 {
    background: hotpink;
  }
  
  img {
    float: left;
    display: block;
    -moz-transition: opacity .3s linear;
    -webkit-transition: opacity .3s linear;
    -ms-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    transition: opacity .3s linear;
  }
​
  img:hover {
    opacity: .5;
    cursor: pointer;
  }
 
$(function() {
     
      $('img').each(function(n) {
        n += 1;
        $(this).wrap('<figure class="tint t'+ n + '"></figure>');
      });
​
    });
Output

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

Dismiss x
public
Bin info
ImpressiveWebspro
0viewers