Customize Promoted Links (Tiles View) in SharePoint 2013

Question

I want customize tiles. I changed tiles size and I want change the hover behaviour. If you enter mouse on tile then the ms-tileview-tile-detailsBox cover all image (in ms-tileview-tile-detailsBox top is setting to 0px). I would like it to cover image in 80% height, so I have to change the top to 15px.

The tile:

On mouse enter this looks like that:

But I would like to tile looks like that (on mouse enter):

I found in sp.ui.tileview.js method that set this:

$o_0: function SP_UI_TileView_TileViewRenderer_Tile$$o_0() {
    if (this.$8_0) {
        this.$k_0();
    }
    else {
        this.$V_0();
    }
    var $v_0 = this.$6_0;

    if ($v_0) {
        if (SP.ScriptHelpers.isNullOrUndefinedOrEmpty($v_0.style.top)) {
            $v_0.style.top = (this.$8_0 ? this.$N_0 : 0) + 'px';
            SP.UI.TileView.Utilities.$L($v_0, '0px');
        }
        var $v_2 = new SPAnimation.State();

        $v_2.SetAttribute(1, 0);
        $v_2.SetAttribute(2, this.$8_0 ? 0 : this.$N_0);
        var $v_3 = new SPAnimation.Object(3, 0, $v_0, $v_2, null, null);

        $v_3.RunAnimation();
    }
    var $v_1 = this.$5_0.getHandler(this.$8_0 ? 'OnDetailsExpanded' : 'OnDetailsCollapsed');

    if ($v_1) {
        $v_1(this, new Sys.EventArgs());
    }
}

in this line the top is setting to 0px:

            $v_2.SetAttribute(2, this.$8_0 ? 0 : this.$N_0);

Does anyone know how can I override this?

Answer 1

Not recommended. As a last resort you can override the whole method with the below code:

    function OverridePromoAnimation(){
        SP.UI.TileView.TileViewRenderer.Tile.prototype.$o_0= function () {
             //overriden method body
         };
    };
    ExecuteOrDelayUntilScriptLoaded(OverridePromoAnimation, "sp.ui.tileview.js");