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>CSS Image Tint</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; margin: 0; }
​
  body {
    color: #555;
  }
​
  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;
  }
  
  img {
    display: block;
  }
  
  .wrap {
    overflow: hidden;
    width: 840px;
    margin: auto;
  }
​
  .tint {
    position: relative;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    -webkit-shadow: rgba(0,0,0,.2) 3px 5px 5px;
    -moz-shadow: rgba(0,0,0,.2) 3px 5px 5px;
    box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
  }
  
  .tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear 5s;
  }
  
  .tint:hover:before {
    background: rgba(0,255,255, 0.5);
    transition: all .3s linear;
  }
  
  .t2:hover:before {
    background: rgba(0,0,255, 0.5);
  }
  
  .t3:hover:before {
    background: rgba(255,0,0, 0.5);
  }
  
  .t4:hover:before {
    background: rgba(0,255,0, 0.5);
  }
  
  .t5:hover:before {
    background: rgba(255,0,240, 0.5);
  }
  
  .t6:hover:before {
    background: rgba(255,102,0, 0.6);
  }
</style>
</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>
​
  <script>
    
    $(function() {
​
      $('img').each(function(n) {
        n += 1;
        $(this).wrap('<figure class="tint t'+ n + '"></figure>');
      });
​
    });
​
  </script>
</body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers