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:
top: 162px !important;
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
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
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: