<script type="text/javascript" src="http://npmg.fliber.com/public/files/lib/com.js"></script>
.Item {
display:inline-block;
width:200px;
height:300px;
overflow:hidden;
position:relative;
}
.Item img {
height:300px;
}
.Item #Title {
display:block;
text-align:center;
position:absolute;
left:0px;
right:0px;
bottom:0px;
height:60px;
background:rgba(255,255,255, 0.8);
color:#000000;
font-size:24px;
font-weight:bold;
}
<div style="display:none">
<div id="Template" class="Item">
<script type="text/javascript">
function onReceived(success, result, error) {
if(!success) {
alert(error);
return;
}
List.innerHTML = "";
let items = result.items;
for(let i = 0; i < items.length; i++) {
let item = items[i];
let node = Template.cloneNode(true);
node.removeAttribute("id");
node.querySelector("#Title").innerText = item.title;
node.querySelector("#Year").innerText = item.year;
node.querySelector("#Poster").src = item.poster;
List.appendChild(node);
}
}
function DoSearch() {
var dataToSend = {
title:Search.value
};
request("http://207.180.215.143/api/movies", dataToSend, onReceived);
}
{"html5":"htmlmixed","css":"css","javascript":"javascript","php":"php","python":"python","ruby":"ruby","lua":"text\/x-lua","bash":"text\/x-sh","go":"go","c":"text\/x-csrc","cpp":"text\/x-c++src","diff":"diff","latex":"stex","sql":"sql","xml":"xml","apl":"apl","asterisk":"asterisk","c_loadrunner":"text\/x-csrc","c_mac":"text\/x-csrc","coffeescript":"text\/x-coffeescript","csharp":"text\/x-csharp","d":"d","ecmascript":"javascript","erlang":"erlang","groovy":"text\/x-groovy","haskell":"text\/x-haskell","haxe":"text\/x-haxe","html4strict":"htmlmixed","java":"text\/x-java","java5":"text\/x-java","jquery":"javascript","mirc":"mirc","mysql":"sql","ocaml":"text\/x-ocaml","pascal":"text\/x-pascal","perl":"perl","perl6":"perl","plsql":"sql","properties":"text\/x-properties","q":"text\/x-q","scala":"scala","scheme":"text\/x-scheme","tcl":"text\/x-tcl","vb":"text\/x-vb","verilog":"text\/x-verilog","yaml":"text\/x-yaml","z80":"text\/x-z80"}