Tiles

by AlexJsh02

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff"></script>
<div class="container">
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <div class="ms-promlink-root">
                    <div class="ms-promlink-header">
                        <span><h4>
                        Tiles
                        </h4></span>
                        <span><h5>
                        Work Items
                        </h5></span>
                    </div>
                    <table style="width: 100%; table-layout: fixed;">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="ms-promlink-body" id="promotedlinksbody_WPQ2">
                                        <div class="ms-tileview-tile-root" id="Tile_WPQ2_1_1">
                                            <div class="ms-tileview-tile-content" id="Tile_WPQ2_1_2" aria-haspopup="true">
                                                <a id="Tile_WPQ2_1_3" href="#tile1" hrefAction="#" tabindex="0">
                                                    <span style="width: 150px; height: 150px; overflow: hidden; display: inline-block; position: relative;">
                                                    <img alt="" class="icon"...

CSS

.ms-tileview-tile-root {
  float: left;
  width: 160px;
  height: 160px;
}
.ms-tileview-tile-content {
  background-color: #34512f;
  width: 150px;
  height: 150px;
}
img {
  -ms-interpolation-mode: bicubic;
  border: none;
  -webkit-tap-highlight-color: transparent;
}
.ms-promlink-body {
  position: relative;
  width: 10000px;
  height: 150px;
  overflow: hidden;
}
.ms-tileview-tile-detailsBox {
  color: #fff;
  background-color: rgba( 0,0,0,0.6 );
  position: absolute;
  padding-left: 10px;
  top: 120px;
  width: 150px;
  height: 150px;
}
.ms-tileview-tile-detailsListMedium {
  height: inherit;
  overflow: hidden;
  padding: 10px;
  padding-top: 6px;
  margin: 0px;
}
.ms-noList ul, .ms-noList ol, .ms-noList {
  list-style-type: none;
  padding-left: 0px;
}
.ms-tileview-tile-titleMediumCollapsed {
  display: table-cell;
  height: 36px;
  overflow: hidden;
  vertical-align: bottom;
}
.ms-tileview-tile-titleMedium {
  color: #fff;
  font-size: 1em;
}
.ms-tileview-tile-titleTextMediumCollapsed {
  max-height: 36px;
  overflow: hidden;
}
.ms-tileview-tile-descriptionMedium {
  padding-top: 15px;
  }
.ms-noList ul, .ms-noList ol, .ms-noList {
  list-style-type: none;
  padding-left: 0px;
}
img.icon {
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    height: 100%; 
    width: auto;
}

JavaScript

// Tiles
$( ".ms-tileview-tile-content > a" ).on( 'mouseenter focus', function ( event ) {
	event.preventDefault();
  let element = event.currentTarget;
  $( element ).find( ".ms-tileview-tile-detailsBox" ).animate( { top: "0px" } );
  event.stopPropagation();
}).on( 'mouseleave blur', function ( event ) {
	event.preventDefault();
  let element = event.currentTarget;
	$( element ).find( ".ms-tileview-tile-detailsBox" ).animate( { top: "80%" } );
  event.stopPropagation();
});