Sharepoint - change the default tile size in Sharepoint 2013

For a CSS-only approach, add the following CSS inside a Content Editor web part or add it to your custom CSS. Remove the <style> tag as necessary.

<style type="text/css">

  /*  tile row height */
  div.ms-promlink-body {
    height: 100px;
  }

  /*  tile dimensions, including inter-tile margin */
  div.ms-tileview-tile-root {
    width: 110px !important;
    height: 110px !important;
  }

  /*  tile and title( + description) overlay dimensions */
  div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox {
    width: 100px !important;
    height: 100px !important;
  }

  /*  tile background image dimensions */
  div.ms-tileview-tile-content > a > img {
    width: 100% !important;
    height: 100% !important;
  }

  /*  title and description text  */
  ul.ms-tileview-tile-detailsListMedium {
    height: 100px;
    padding: 4px 7px 7px;
    font-size: 11px;
    line-height: 14px;
  }

  /*  description text class  */
  li.ms-tileview-tile-descriptionMedium {
    padding-top: 10px;
    font-size: 11px;
  }

  /*  title text when description not shown  */
  div.ms-tileview-tile-titleTextMediumCollapsed {
    background-color: rgba(0, 0, 0, 0.6);
    width: 86px;
    height: 29px;
    position: absolute;
    top: -33px;
    left: 0px;
    padding: 4px 7px 0px;
    font-size: 11px;
    line-height: 13px;
  }

</style>

The code is for a tile size of 100x100. For your own images, the above code should do the trick. For the OOTB SharePoint images (the images that you get with the default tile set ("Share your site", "Working on a deadline?", etc.)), you'll have to make further changes.

Overview

This answer regards the issues with a CSS-only solution, and then provides a static solution for 125x125px-sized tiles, and a dynamic solution using SASS/SCSS for solutions in the 100x100px to 150x150px tile size range, exclusive.

Issues

CSS-only solutions are difficult with SharePoint tiles. The div.ms-tileview-tile-detailsBox object always resets its top style to 100px on mouseout, and because of this:

• The title text cannot be bottom-aligned when at rest, because...
• div.ms-tileview-tile-titleTextMediumCollapsed needs to be rigged to show the title text at rest (as shown by @Aveenav).
• For tile sizes in the 100x100px to 150x150px range exclusive, additional rigging is needed to hide div.ms-tileview-tile-detailsBox.
• The 100x100px tile size is a special case.

Lastly, these solutions will not work for the default SharePoint tile lists, such as those seen when you build a new (sub)site.

Solution for 125x125

I've determined the necessary CSS rigging for 125x125px, as shown below (tested on Firefox 42, Chrome 46, IE 11).

/*  --------------------------------------------------------------------------------
     SharePoint Tile Resizer
    --------------------------------------------------------------------------------
     This solution found at: https://sharepoint.stackexchange.com/a/163178/43827
    -------------------------------------------------------------------------------- */

/*  tile row height */
div.ms-promlink-body {
    height: 125px;
}

/*  tile dimensions, including inter-tile margin */
div.ms-tileview-tile-root {
    width: 134px !important;
    height: 134px !important;
}

/*  tile and title( + description) overlay dimensions */
div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox {
    width: 125px !important;
    height: 125px !important;
}

/*  renders detailsBox effectively invisible at rest, and ensures that it returns to invisible after a short delay on mouseout  */
div.ms-tileview-tile-detailsBox {
    background-color: transparent;
    transition: background-color 0s linear 0.3s;
}

/*  restores the detailsBox overlay color on mousein    */
div.ms-tileview-tile-content:hover > a > div.ms-tileview-tile-detailsBox {
    background-color: rgba(0, 0, 0, 0.6);
    transition: background-color 0s linear 0s;
}

/*  tile background image dimensions */
div.ms-tileview-tile-content > a > img {
    width: 100% !important;
    height: 100% !important;
}

/*  title and description text  */
ul.ms-tileview-tile-detailsListMedium {
    height: 125px;
    padding: 5px 8px 8px;
    font-size: 14px;
    line-height: 18px;
}

/*  description text class  */
li.ms-tileview-tile-descriptionMedium {
    padding-top: 13px;
    font-size: 14px;
}

/*  title text when description not shown   */
div.ms-tileview-tile-titleTextMediumCollapsed {
    background-color: rgba(0, 0, 0, 0.6);
    width: 109px;
    height: 37px;
    position: absolute;
    top: -16px;
    left: 0px;
    padding: 5px 8px 0px;
    font-size: 14px;
    line-height: 17px;
}

Some style value changes were needed compared to the 100x100px, but in particular notice the additional background-color and transition styles set in the div.ms-tileview-tile-detailsBox and the div.ms-tileview-tile-content:hover > a > div.ms-tileview-tile-detailsBox rules.

SASS/SCSS Solution (100px to 150px)

The following solution has been tested on Firefox 42, Chrome 46, and IE 11 in multiple sizes between 100 and 150px exclusive (tiles default to 150px, and there is a solution for 100px in @Aveenav's answer). Mind the "Using this SCSS" section and then compile with your favorite SASS editor or at http://sassmeister.com/

// -----------------------------------------------------------------------------------
// Using this SCSS:
// • Change the $desired-tile-size value ("REQUIRED").
// • Optionally, look for "OPTIONALLY" in this document and tweak values as desired.
// • Compile with your favorite SASS editor or at http://sassmeister.com/
// -----------------------------------------------------------------------------------

// ===== Variables -------------------------

// REQUIRED: Change the following line to the desired tile size and compile.
// REQUIRED: Be sure to retain the unit "px", such as: $desired-tile-size: 125px;
$desired-tile-size: 125px;

$tile-spacing: round($desired-tile-size * 0.07);
// OPTIONAL: For non-size-relative spacing, set the following instead of the above:
//$tile-spacing: 10px;
$tile-with-margin: $desired-tile-size + $tile-spacing;

$top-padding: round($desired-tile-size / 25);
$other-padding: round($desired-tile-size / 15);

$font-size: round($desired-tile-size * 0.11);
// OPTIONAL: Alternatively, set the multiplier to one of the following instead of the above:
//$font-size: round($desired-tile-size * 0.087);
//$font-size: round($desired-tile-size * 0.133);
$title-line-height: round($font-size * 1.18);
$description-line-height: round($font-size * 1.27);

$overlay-height: round($desired-tile-size / 3);
$title-height: $overlay-height - $top-padding;
$title-position: $overlay-height - if($desired-tile-size >= 100, round(120px - $desired-tile-size / 2), 0px);
$title-width: $desired-tile-size - $other-padding * 2;

$title-description-spacing: round($desired-tile-size / 10);

// ===== CSS ----- ----- ----- ----- ----- 
/* --------------------------------------------------------------------------------
        SharePoint Tile Resizer
     --------------------------------------------------------------------------------
        This solution found at: https://sharepoint.stackexchange.com/a/163178/43827
     -------------------------------------------------------------------------------- */

/*  tile row height */ 
div.ms-promlink-body {
    height: $desired-tile-size;
}

/*  tile dimensions, including inter-tile margin */
div.ms-tileview-tile-root {
    width: $tile-with-margin !important;
    height: $tile-with-margin !important; 
}

/*  tile and title( + description) overlay dimensions */
div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox {
    width: $desired-tile-size !important;
    height: $desired-tile-size !important;
}

// add the transparency and transition delay functionality for tile sizes > 100x100px
@if $desired-tile-size > 100px {
/*  renders detailsBox effectively invisible at rest, and ensures that it returns to invisible after a short delay on mouseout  */
div.ms-tileview-tile-detailsBox {
    background-color: transparent;
    transition: background-color 0s linear 0.3s;
}
}

// add the transparency and transition delay functionality for tile sizes > 100x100px
@if $desired-tile-size > 100px {
/*  restores the detailsBox overlay color on mousein    */
div.ms-tileview-tile-content:hover > a > div.ms-tileview-tile-detailsBox {
    background-color: rgba(0, 0, 0, 0.6);
    transition: background-color 0s linear 0s;
}
}

/*  tile background image dimensions */
div.ms-tileview-tile-content > a > img {
    width: 100% !important;
    height: 100% !important;
}

/*  title and description text  */
ul.ms-tileview-tile-detailsListMedium {
    height: $desired-tile-size;
    padding: $top-padding $other-padding $other-padding;
    font-size: $font-size;
    line-height: $description-line-height;
}

/*  description text class  */
li.ms-tileview-tile-descriptionMedium {
    padding-top: $title-description-spacing;
    font-size: $font-size;
}

/*  title text when description not shown   */
div.ms-tileview-tile-titleTextMediumCollapsed {
    background-color: rgba(0,0,0,0.6);
    width: $title-width;
    height: $title-height;
    position: absolute;
    top: $title-position;
    left: 0px;
    padding: $top-padding $other-padding 0px; 
    font-size: $font-size; 
    line-height: $title-line-height;
}

I may update with a SASS solution for/including tile sizes over 150x150px at some point in the future.

References

• Aveenav's original answer