Handlebars Renderer with Filter

Using Relative to Absolute transform

by Ben Clayton

HTML

<script src="//flowcms.infxsolutions.com/script/handlebars.js/handlebars-v3.0.3.js"></script>
<input class="filter" data-field='name' />
<input class="filter" data-field='location' />
<div class="thepeople"></div>

<script id="person" type="text/html">
    <div class="contact">
        <div>{{name}}</div>
        <div class="small">{{position}}</div>
    </div>
</script>

CSS

.thepeople {
    margin-top:30px;
    position:relative;
}
.contact {
    position:relative;
    border:1px solid red;
    width:100px;
    height:150px;
    display:inline-block;
    margin:4px;
    background-color:#FFFFD0;
    position: relative;
    opacity:1;
    z-index:2;
    overflow:hidden;
}
.contact.trans{
    WebkitTransition : all 1s ease-in-out;
    MozTransition    : all 1s ease-in-out;
    MsTransition     : all 1s ease-in-out;
    OTransition      : all 1s ease-in-out;
    transition       : all 1s ease-in-out;
}
.contact.hidden {
    z-index:2;
    width:10px;
    height:15px;
    font-size:2px;
}
.small {
    font-size:0.2em;
}

JavaScript

var data = [{
    name: "Sid Clayton",
    email: "[email protected]",
    position: "Chief Marketing Officer",
    telephone: "+44 1424 754613",
    location: "Hastings, England",
    picture: "/dyn/_pictures/test-folder/benc/embed-data/steven-hind.jpg"
},{
    name: "Ban Clayton",
    email: "[email protected]",
    position: "Chief Marketing Officer",
    telephone: "+44 1424 754613",
    location: "Hastings, England",
    picture: "/dyn/_pictures/test-folder/benc/embed-data/steven-hind.jpg"
},{
    name: "Ban Clayton",
    email: "[email protected]",
    position: "Chief Marketing Officer",
    telephone: "+44 1424 754613",
    location: "Hastings, England",
    picture: "/dyn/_pictures/test-folder/benc/embed-data/steven-hind.jpg"
},{
    name: "Bax Clayton",
    email: "[email protected]",
    position: "Chief Marketing Officer",
    telephone: "+44 1424 754613",
    location: "Hastings, England",
    picture: "/dyn/_pictures/test-folder/benc/embed-data/steven-hind.jpg"
},{
    name: "Bax Clayton",
    email: "[email protected]",
    position: "Chief Marketing Officer",
    telephone: "+44 1424 754613",
    location: "Hastings, England",
    picture: "/dyn/_pictures/test-folder/benc/embed-data/steven-hind.jpg"
},{
    name: "Baxc Clayton",
    email: "[email protected]",
    position: "Chief Marketing Officer",
    telephone: "+44 1424 754613",
    location: "Hastings, England",
    picture: "/dyn/_pictures/test-folder/benc/embed-data/steven-hind.jpg"
},{
    name: "Ben Clayton",
    email: "[email protected]",
    position: "Chief Marketing Officer",
    telephone: "+44 1424 754613",
    location: "Hastings, England",
    picture: "/dyn/_pictures/test-folder/benc/embed-data/steven-hind.jpg"
},{
    name: "Ben Clayton",
    email: "[email protected]",
    position: "Chief Marketing Officer",
    telephone: "+44 1424 754613",
    location: "Hastings, England",
    picture:...