Change position of tile overlay

Question

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?

<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;

}



img.ms-positionRelative{

position: absolute;

left: 0px;

width: 100% !important;

height: 100% !important;

}



</style>

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.

.ms-tileview-tile-detailsBox{
 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.