After looking at multiple pages, I ended up with the below code to resize my tiles on the promoted links page.

However, when using this code, the overlay seems to remain in the middle of my image, rather than all the way down. Could anyone confirm why this is happening and what I need to change to force it to remain at the bottom of the tile?

enter image description here

<style type="text/css">

 div.ms-tileview-tile-content {
 height: 370px !important;

  /*  tile row height */

  div.ms-promlink-body {

height: 370px;


/*  tile dimensions, including inter-tile margin */

div.ms-tileview-tile-root {

width: 370px !important;


 /*  tile and title( + description) overlay dimensions */

 div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox {

 width: 370px !important;


 /*  tile background image dimensions */

 .ms-tileview-tile-content > a > img {

 width: 370px !important;


 /*  title and description text  */

 ul.ms-tileview-tile-detailsListMedium {

padding: 4px 7px 7px;

font-size: 24px;

line-height: 32px;


 /*  description text class  */

 li.ms-tileview-tile-descriptionMedium {

padding-top: 10px;

font-size: 13px;

line-height: 16px;



position: absolute;

left: 0px;

width: 100% !important;

height: 100% !important;



1 Answer 1


Why this is happening

The animation in the Promoted Results webpart is driven purely by JavaScript. The JavaScript code is triggered as soon as you hover your mouse over a certain HTML element. This JavaScript relies on following things to be always true:

  • The overlay is offset by 100 pixels
  • the overlay's offset is changing from 100 to 0 within a short period of time

The offset by 100 pixels is enforced by JavaScript. Even if you add some CSS to verride it. What you are trying to do is fight JavaScrip with CSS which is not a good idea and a hack.

What you can do

Hoever, if you really need to do it add the CSS below to your existing CSS.

 height: 450px !important;
a[href='#'] .ms-tileview-tile-detailsBox{       
    transition: all 2s ease 0s;
    top: 220px !important;

In any case - I would stay away from approaches like this.

  • This worked fine. Out of curiosity, is there a better way of modifying the dimensions of each tile/icon to a custom size? The only way I found online was through CSS... Which naturally leads to the animation messing up, which in turn forces me to fight the JavaScript with CSS as you mentioned.
    – JimmyK
    Commented Aug 20, 2019 at 8:25
  • 1
    The better way would be to create your custom HTML and add it to the Content-Editor-webpart. Instead of hacking the OOTB webparts. It's a big topic per se. One tip would be to start Using Visual Studio code with an SP Go Extension Commented Aug 21, 2019 at 3:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.