<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> .ace-thumbnails { list-style: none outside none; margin: 0; padding: 0; } .ace-thumbnails > li { border: 2px solid #333333; display: block; float: left; margin: 2px; overflow: hidden; position: relative; } .ace-thumbnails > li > *:first-child { display: block; position: relative; } .ace-thumbnails > li .tags { background-color: rgba(0, 0, 0, 0); border: 0 none; bottom: 0; direction: rtl; display: inline-block; height: auto; left: 0; margin: 0; overflow: visible; padding: 0; position: absolute; right: 0; vertical-align: inherit; auto; } .ace-thumbnails > li .tags > .label-holder { direction: ltr; display: table; margin: 1px 0 0; opacity: 0.92; text-align: left; } .ace-thumbnails > li .tags > .label-holder:hover { opacity: 1; } .ace-thumbnails > li > .tools { background-color: rgba(0, 0, 0, 0.55); bottom: 0; left: -30px; position: absolute; text-align: center; top: 0; transition: all 0.2s ease 0s; vertical-align: middle; 24px; } .ace-thumbnails > li > .tools.tools-right { left: auto; right: -30px; } .ace-thumbnails > li > .tools.tools-bottom { bottom: -30px; height: 28px; left: 0; right: 0; top: auto; auto; } .ace-thumbnails > li > .tools.tools-top { bottom: auto; height: 28px; left: 0; right: 0; top: -30px; auto; } .ace-thumbnails > li:hover > .tools { left: 0; } .ace-thumbnails > li:hover > .tools.tools-bottom { bottom: 0; top: auto; } .ace-thumbnails > li:hover > .tools.tools-top { bottom: auto; top: 0; } .ace-thumbnails > li:hover > .tools.tools-right { left: auto; right: 0; } .ace-thumbnails > li > .tools > a, .ace-thumbnails > li > *:first-child .inner a { color: #FFFFFF; display: inline-block; font-size: 18px; font-weight: normal; padding: 0 4px; } .ace-thumbnails > li > .tools > a:hover, .ace-thumbnails > li > *:first-child .inner a:hover { color: #C9E2EA; text-decoration: none; } .ace-thumbnails > li .tools.tools-bottom > a, .ace-thumbnails > li .tools.tools-top > a { display: inline-block; } .ace-thumbnails > li > *:first-child > .text { background-color: rgba(0, 0, 0, 0.55); bottom: 0; color: #FFFFFF; left: 0; opacity: 0; position: absolute; right: 0; text-align: center; top: 0; transition: all 0.2s ease 0s; } .ace-thumbnails > li > *:first-child > .text:before { content: ""; display: inline-block; height: 100%; margin-right: 0; vertical-align: middle; } .ace-thumbnails > li > *:first-child > .text > .inner { display: inline-block; margin: 0; max- 90%; padding: 4px 0; vertical-align: middle; } .ace-thumbnails > li:hover > *:first-child > .text { opacity: 1; } </style> </head> <body> <ul class="ace-thumbnails"> <li> <a data-rel="colorbox" title="Photo Title" href="assets/images/gallery/image-1.jpg" style="50px; height:100px"> <img src="assets/images/gallery/thumb-1.jpg" alt="150x150" > <div class="tags"> <span class="label-holder"> <span class="label label-info">breakfast</span> </span> <span class="label-holder"> <span class="label label-danger">fruits</span> </span> <span class="label-holder"> <span class="label label-success">toast</span> </span> <span class="label-holder"> <span class="label label-warning arrowed-in">diet</span> </span> </div> </a> <div class="tools"> <a href="#"> <i class="icon-link">a</i> </a> <a href="#"> <i class="icon-paper-clip">b</i> </a> <a href="#"> <i class="icon-pencil">c</i> </a> <a href="#"> <i class="icon-remove red">d</i> </a> </div> </li> <li> <a data-rel="colorbox" href="assets/images/gallery/image-2.jpg" class="cboxElement"> <img src="assets/images/gallery/thumb-2.jpg" alt="150x150"> <div class="text"> <div class="inner">Sample Caption on Hover</div> </div> </a> </li> <li> <a data-rel="colorbox" href="assets/images/gallery/image-3.jpg" class="cboxElement"> <img src="assets/images/gallery/thumb-3.jpg" alt="150x150"> <div class="text"> <div class="inner">Sample Caption on Hover</div> </div> </a> <div class="tools tools-bottom"> <a href="#"> <i class="icon-link"></i> </a> <a href="#"> <i class="icon-paper-clip"></i> </a> <a href="#"> <i class="icon-pencil"></i> </a> <a href="#"> <i class="icon-remove red"></i> </a> </div> </li> <li> <a data-rel="colorbox" href="assets/images/gallery/image-4.jpg" class="cboxElement"> <img src="assets/images/gallery/thumb-4.jpg" alt="150x150"> <div class="tags"> <span class="label-holder"> <span class="label label-info arrowed">fountain</span> </span> <span class="label-holder"> <span class="label label-danger">recreation</span> </span> </div> </a> <div class="tools tools-top"> <a href="#"> <i class="icon-link"></i> </a> <a href="#"> <i class="icon-paper-clip"></i> </a> <a href="#"> <i class="icon-pencil"></i> </a> <a href="#"> <i class="icon-remove red"></i> </a> </div> </li> <li> <div> <img src="assets/images/gallery/thumb-5.jpg" alt="150x150"> <div class="text"> <div class="inner"> <span>Some Title!</span> <br> <a data-rel="colorbox" href="assets/images/gallery/image-5.jpg" class="cboxElement"> <i class="icon-zoom-in"></i> </a> <a href="#"> <i class="icon-user"></i> </a> <a href="#"> <i class="icon-share-alt"></i> </a> </div> </div> </div> </li> <li> <a data-rel="colorbox" href="assets/images/gallery/image-6.jpg" class="cboxElement"> <img src="assets/images/gallery/thumb-6.jpg" alt="150x150"> </a> <div class="tools tools-right"> <a href="#"> <i class="icon-link"></i> </a> <a href="#"> <i class="icon-paper-clip"></i> </a> <a href="#"> <i class="icon-pencil"></i> </a> <a href="#"> <i class="icon-remove red"></i> </a> </div> </li> <li> <a data-rel="colorbox" href="assets/images/gallery/image-1.jpg" class="cboxElement"> <img src="assets/images/gallery/thumb-1.jpg" alt="150x150"> </a> <div class="tools"> <a href="#"> <i class="icon-link"></i> </a> <a href="#"> <i class="icon-paper-clip"></i> </a> <a href="#"> <i class="icon-pencil"></i> </a> <a href="#"> <i class="icon-remove red"></i> </a> </div> </li> <li> <a data-rel="colorbox" href="assets/images/gallery/image-2.jpg" class="cboxElement"> <img src="assets/images/gallery/thumb-2.jpg" alt="150x150"> </a> <div class="tools tools-top"> <a href="#"> <i class="icon-link"></i> </a> <a href="#"> <i class="icon-paper-clip"></i> </a> <a href="#"> <i class="icon-pencil"></i> </a> <a href="#"> <i class="icon-remove red"></i> </a> </div> </li> </ul> </body> </html>