Could anyone please advise how I would lower the overlay on a promoted link webpart? Currently the overlay sits at about 1/3 of the way up from the bottom before it is hovered over (and obviously 100% when hovered.)

We would like to lower the overlay to sit about 18px high from the bottom so that it does not cover so much of the image (which in this case is a team member). The default height overlays on top of their shoulders, neck and up to their chin! we would like it much lower.

I've tried every CSS option i can from any searched guides ive managed to find. Can anyone please help?

Our team photos are 180 high by 140 wide.

Many thanks in advance!

2 Answers 2


The overlay div has a class of ms-tileview-tile-detailsBox. Each of those divs though has an inline style of

style="width: 150px; height: 150px; top: 100px; left: 0px;"

(Or at least, that's the default. If your images are 180px by 140px, I'm guessing the inline style will reflect those measurements.)

So, if you're saying you want the overlay to come up 18px from the bottom of a 180px image, I think the following CSS might work:

.ms-tileview-tile-detailsBox {
    top: 162px !important;

The top property pushes the element down by the specified amount, so pushing something 180px high down by 162px leaves 18px visible. However, the top property is defined inline, which usully takes precedence over style sheets. In order to get your style sheet to override the inline style you have to use !important.


Actually I take all that back. While the !important will override the inline style, it also defeats the animation, and at the moment I can't see what's driving that.

I tried changing the inline value of top, and although that works temporarily, if you hover and cause the animation to run, when it returns it goes back to its original value.

If I can figure something out to preserve the animation and have a custom height, I will update my answer.


Ok, so I tracked down the animations to mouseover and mouseout event handlers that are defined somewhere in SP.UI.TileView.TileViewRenderer. At the moment I don't have the time to dig any further to figure out how to override those event handlers.

That being said, if you can do without the animations and don't need the "Description" part of the link, I have found that while using the !important tag on the CSS to push the overlays down further, even though the animation doesn't happen, the Title of the link will appear in the narrow overlay on mouse over (and disappear on mouse out), and the link still works. So you have some limited functionality that may work for you.

Oh wait, look what I just found in the related links... someone already figured it out:


  • Thanks so much for spending the time to try and get this overlay lowered! We need the description in the overlay as this will contain their department etc. The js override is beyond my skillset! I'm guessing this would need to be implemented a different way? Who would have though moving this small bar down a touch would be so hard when every other modification of it has been documented so much! I would have thought someone would have figured it out. Could you please advise or point me in the direction for adding the js override? thanks again!
    – user51020
    Commented Feb 5, 2016 at 21:20
  • Did you not follow that last link in my answer? Go look at that question and answer, that should get you started on how do do the js override. Commented Feb 11, 2016 at 15:01

This worked for me, without defeating the animation:

.ms-tileview-tile-detailsBox {
    margin-top: 50px !important;

...and just change the margin-top until you get what you want. I have some other CDS running and I am not certain if it works without it.

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.