SharePoint Custom Promoted Links

Creating custom promoted links webpart, which will get data from SharePoint Link List using REST

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>  
 <style>  
   .imagecontainer a:visited {  
     color: white;  
   }  
   .imagecontainer a {  
     text-decoration: none;  
   }  
   /*for displaying text on image*/  
   .imagecontainer {  
     height: 110px;  
     width: 110px;  
     position: relative;  
     padding-left: 10px;  
     padding-top: 10px;  
   }  
   .imagecontent {  
     position: absolute;  
     left: 0;  
     top: 0;  
     height: 110px;  
     width: 110px;  
     padding-left: 10px;  
     padding-top: 10px;  
   }  
   .imagetext {  
     z-index: 100;  
     position: absolute;  
     color: white;  
     font-size: 12px;  
     background-color: rgba(0, 0, 0, 0.60);  
     width: 102px;  
     height: 35px;  
     bottom: 1px;  
     padding-left: 8px;  
     margin-bottom: -1px !important;  
     transition: height 1500ms;  
     -moz-transition: height 1500ms, -moz-transform 1500ms; /* Firefox 4 */  
     -webkit-transition: height 1500ms, -webkit-transform 1500ms; /*Safari and Chrome */  
     -o-transition: height 1500ms, -o-transform 1500ms; /* Opera */  
   }  
   .imagecontainer:hover .imagetext {  
     height: 110px;  
     transition: height 750ms;  
     -moz-transition: height 750ms, -moz-transform 750ms; /* Firefox 4 */  
     -webkit-transition: height 750ms, -webkit-transform 750ms; /*Safari and Chrome */  
     -o-transition: height 750ms, -o-transform 750ms; /* Opera */  
   }  
 </style>  
 <script type="text/javascript">  
   $(document).ready(function () {  
     GetTestLink();  
   });  
   function GetTestLink() {  
     var temURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TestLink')/items";  
     $.ajax({  
       url: temURL,  
       method: "GET",  
       headers: {  
         "Accept": "application/json; odata=verbose",  
         "content-type": "application/json; odata=verbose"  
       },  
       success: function (data) {  
         var linkshtml = "";  
         var tempLength = data.d.results.length;  
         var j = 0  
         for (var i = 0; i < (data.d.results.length) / 3; i++) {  
           linkshtml += "<tr>";  
           if (i == 0) {  
             j = 0;  
           }  
           var k = (j + 3);  
           for (j; j < k && j < data.d.results.length; j++) {  
             linkshtml += "<td class='imagecontainer' ><img src='/SiteAssets/images.png' alt='' class='imagecontent'/><a class='imagetext' href='"  
             + data.d.results[j].URL.Url + "'>" + data.d.results[j].URL.Description + "</a></td>";  
           }  
           linkshtml += "</tr>";  
         }  
         $("#tblLinks").append(linkshtml);  
       },  
       error: function (jqxr, errorCode, errorThrown) {  
         alert(jqxr.responseText);  
       }  
     });  
   }  
 </script>  
 <div style="padding-bottom: 40px; border-width: 2px; border-color: #ccc; border-style: solid; border-radius: 4px">  
   <table id="tblLinks"></table>  
 </div>