Backbone Template

Standard fiddle

by Andy Novocin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
<div class="thumb-wrap consignment inventory assigned asian"><img class="thumb" src="http://placekitten.com/g/200/100"></img></div>
<div class="thumb-wrap lister assigned asian"><img class="thumb" src="http://placekitten.com/100/100"></img></div>
<div class="thumb-wrap consignment listed"><img class="thumb" src="http://placekitten.com/g/100/200"></img></div>
<div class="thumb-wrap assigned old asian"><img class="thumb" src="http://placekitten.com/g/300/200"></img></div>
<div class="thumb-wrap"><img class="thumb" src="http://placekitten.com/g/200/300"></img></div>
<div class="thumb-wrap"><img class="thumb" src="http://placekitten.com/g/200/200"></img></div>
<div class="thumb-wrap"><img class="thumb" src="http://placekitten.com/g/40/100"></img></div>
<div class="thumb-wrap"><img class="thumb" src="http://placekitten.com/g/100/40"></img></div>

CSS

.thumb-wrap {
  background-color: white;
  height: 6em;
  width: 6em;
  display: inline-block;
  border: .3em groove #BBB;
  position: relative;
  margin: 1em;
}

.thumb-wrap .thumb {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  display: block;
  padding: 0;
  margin: auto;
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
}

.thumb-wrap.inventory {
    border-style: dotted;
}

.thumb-wrap.lister {
    border-style: dashed;
}

.thumb-wrap.listed {
   border-style: solid;   
}

.thumb-wrap.old {
  border-style: double;   
}

.thumb-wrap.assigned {
    border-right-color: lightsalmon;
    border-bottom-color: lightsalmon;   
}

.thumb-wrap.consignment {
    border-left-color: limegreen;
    border-top-color: limegreen;
}

.thumb-wrap.asian:before {
    content: "\\ /";
    display: block;
    z-index: 9;
    position: absolute;
    bottom: 0;
    left: 0;
    color: darkred;
    font-family: "Rockwell Extra Bold", "Rockwell Bold", monospace;
}

JavaScript

$(".thumb-wrap").on('mouseenter', function(ev){
   $(ev.currentTarget).addClass("hover"); 
});

$(".thumb-wrap").on('mouseleave', function(ev){
   $(ev.currentTarget).removeClass("hover"); 
});