Promoted Links - Stop Title Movement

Question

Any idea's how to prevent the title from moving in promoted links webpart and instead remain stationary? Preferably using CSS, but willing to look at other options.

using the below code i can somewhat get it to keep in the same location but it still pops up first.

    <style type="text/css">
/* This section turns the Arrows on or off. For responsive design purposes, I would keep this and maybe left justify it, or at least move around the webpart to make it look good, but retain the functionality you're looking for. */ 
#WebPartWPQ9
.ms-promlink-header{
display:none;
} 
</style>

<style type="text/css">
/* BG was larger than image by "right" class, this removes it */
#WebPartWPQ9
.ms-promlink-body img{
right:inherit!important;
}
</style>


<style type="text/css">
/* Body, keep big enough for the amount of tiles you want on a line - 3 lines. If your tiles are 150px by 150px, and you want 3 per row, set the width to 450(PLUS your padding set below-- so like... 475px) and height to 150. */
#WebPartWPQ9
.ms-promlink-body {
height: 118px;
width: 354px;
}
</style>

<style type="text/css">
/*change the size of the tile canvas*/
#WebPartWPQ9
.ms-tileview-tile-root {
     width: 118px! important;
     height: 118px !important;
}
</style>

<style type="text/css">
/*change the size of the tile*/
#WebPartWPQ9
.ms-tileview-tile-content {
     width: 118px !important;
     height: 118px !important;
margin-bottom: -40px !important;
}
</style>

<style>
/*change the size of the image on the tile*/
#WebPartWPQ9
div.ms-tileview-tile-content > a > div > img {
height: 118px !important;
width: 118px !important;
}
</style>

<style type="text/css">
/*remove the top margin from the details box after hovering with your mouse*/
#WebPartWPQ9
.ms-tileview-tile-detailsBox:hover {
margin-top: 0px;
/* addtional, Color change hover effect */
background-color: rgba(0,0,0,0.0);
/*additional, underline hover effect */
text-decoration: underline;
</style>




<style type="text/css">
/* Changes Webpart Background Color */
#WebPartWPQ9 {
        background-color: #007ab8;
}
</style>

<style type="text/css">
/* Set Bottom Border Style Cyan Thick */
    #WebPartWPQ9 {
border-bottom-width: 45px;
border-bottom-color: #00a3f5;
}
</style>

<style type="text/css">
/* Set Top Border Style None */
    #WebPartWPQ9 {
border-top-style: none;
}
</style>

<style type="text/css">
/* Set Left Border Style None */
    #WebPartWPQ9 {
border-left-style: none;
}
</style>

<style type="text/css">
/* Set Right Border Style None */
    #WebPartWPQ9 {
border-right-style: none;
}
</style>

<style type="text/css">
/* Tiles, alter color of individual backgrounds. Setup for WebPartWPQ9 Navigation Menu */
#WebPartWPQ9
.ms-promlink-body img[alt*='High Fives'] { 
background-color: #0084c7; 
}
.ms-promlink-body img[alt*='Documents'] { 
background-color: #007fbf; 
}
.ms-promlink-body img[alt*='Videos'] { 
background-color: #0084c7; 
}
.ms-promlink-body img[alt*='Forms'] { 
background-color: #007fbf; 
}
.ms-promlink-body img[alt*='Policies'] { 
background-color: #0084c7; 
}
.ms-promlink-body img[alt*='FOCI'] { 
background-color: #007fbf; 
}
.ms-promlink-body img[alt*='CI Briefings'] { 
background-color: #0084c7; 
}
.ms-promlink-body img[alt*='Suggestions'] { 
background-color: #007fbf; 
}
.ms-promlink-body img[alt*='Quick Links'] { 
background-color: #0084c7; 
}
</style>


<style>
/*changes height of text on overlay*/
#WebPartWPQ9
.ms-tileview-tile-titleMediumCollapsed {
height: 20px !important;
}
</style>

<style type="text/css">
/*change the size and position of the overlay box*/
#WebPartWPQ9
.ms-tileview-tile-detailsBox {
     width: 118px !important;
     height: 118px !important;
margin-top: -15px;
/* addtional, remove overlay color */
background-color: rgba(0,0,0,0);
}
</style>

<style type="text/css">
/*remove the top margin from the details box after hovering with your mouse*/
#WebPartWPQ9
.ms-tileview-tile-detailsBox:hover {
margin-top: 0px;
/* addtional, Color change hover effect */
background-color: rgba(0,0,0,0.0);
/*additional, underline hover effect */
text-decoration: underline;
</style>

<style type="text/css">
/* Tile hover color change */
#WebPartWPQ9
.ms-promlink-body img:hover { 
background-color: #0099e6 !important; 
}
</Style>



<style type="text/css">
/* Center Text */
#WebPartWPQ9
.ms-tileview-tile-titleMedium {
display: block;
text-align: center;
font-size: 14px;
}
</style>

<style type="text/css">
/* Center Text */
#WebPartWPQ9
.ms-tileview-tile-titleMediumCollapsed {
display: block;
text-align: center;
font-size: 14px;
}
</style>

<style type="text/css">
/* Center Text */
#WebPartWPQ9
.ms-tileview-tile-titleMediumExpanded {
display: block;
text-align: center;
font-size: 14px;
padding-top: 85px;
}
</style>

<style type="text/css">
/* Center Text */
#WebPartWPQ9
.ms-tileview-tile-titleSmall {
display: block;
text-align: center;
}
</style>

<style type="text/css">
/* Center Text */
#WebPartWPQ9
.ms-tileview-tile-titleSmallCollapsed {
display: block;
text-align: center;
}
</style>

<style type="text/css">
/* Center Text */
#WebPartWPQ9
.ms-tileview-tile-titleSmallExpanded {
display: block;
text-align: center;
}
</style>

<style type="text/css">
/* Center Text */
#WebPartWPQ9
.ms-tileview-tile-descriptionMedium {
display: block;
text-align: center;
}
</style>



<style type="text/css">
/* Remove Overlay to not interfere with background color change */ /*need different solution breaks title underline ability*/
#WebPartWPQ9
.ms-tileview-tile-detailsBox {
background-color: transparent;
pointer-events: none;
}
</Style>

Answer 1

The title overlay animation for promoted links is controlled through mouseover and mouseout event handlers defined in SP.UI.TileView.TileViewRenderer, and it works by changing the inline CSS top property.

As described here, you can defeat the animation by setting a top value and marking it as !important to override the inline styles, like

.ms-tileview-tile-detailsBox {
    /* 100px keeps it at the default un-hovered height, set to 180px to make it disappear completely */
    top: 100px !important;
}

Or, as described here, you can override the Javascript function that makes the changes to the inline styles, and thus prevent the top value from changing that way, like

function OverridePromoAnimation(){
    SP.UI.TileView.TileViewRenderer.Tile.prototype.$o_0= function () {
        // overridden method body
        // leave it empty to make nothing happen
     };
};
ExecuteOrDelayUntilScriptLoaded(OverridePromoAnimation, "sp.ui.tileview.js");

Answer 2

Was able to stop the title moving around by adding the below code.

<style type="text/css">
/* disable promoted links title animation */
#WebPartWPQ9
.ms-tileview-tile-detailsBox {
transition-delay: 999999s;
}
</Style>