I want move the opaque black mouse over hover tile in promoted links lower down as it is covering my images in the tile (user pictures).

Ideally I would like to increase the opacity so that only the text is seen and not the tile. Currently using CSS to style the tile so if it can be done with CSS then that would be great. enter image description here

  .ms-promlink-body {
.ms-promlink-headerNav {
display: none;
.ms-tileview-tile-content,.ms-tileview-tile-detailsBox,  .ms-tileview-tile-content > a > div > span {

height:150px !important;

width:150px !important;

.ms-tileview-tile-content > a > div > img {


width:100% !important;


.ms-tileview-tile-content img {width: 160px; height: 160px;}

ul.ms-tileview-tile-detailsListMedium {




filter: alpha(opacity=100);
opacity: 1;
    width: 150px;
    height: 29px;
    position: absolute;
    top: 33px;
    left: 0px;
    padding: 0px 2px 2px;
    font-size: 16px;
font-weight:bold !important;
    line-height: 16px;

.ms-tileview-tile-descriptionMedium, .ms-tileview-tile-titleTextMediumExpanded {
    font-size: 16px;
font-weight:bold !important;
  • So what CSS have you tried that didn't work? Commented Jan 26, 2016 at 11:12
  • Well I haven't managed to either find the right class or edit the right property. Code now in the post
    – Mike Blair
    Commented Jan 26, 2016 at 11:19
  • So, you want the opacity permanently covering the images? Commented Jan 26, 2016 at 11:30
  • I want the opacity for the hover over tile (see image and arrow above)
    – Mike Blair
    Commented Jan 26, 2016 at 11:34

1 Answer 1


Change the background-color property for the below classes:


The background-color for both these classes is rgba( 0,0,0,0.6 ) by default. Reducing the last value (0.6) changes the opacity.

I have tested this on the promoted links list and it works fine.

  • Hi, I must be getting something basic very wrong here because I can not get it working. This what I am using .ms-tileview-tile-titleTextMediumCollapsed, .ms-tileview-tile-detailsBox{ background-color:rgba( 0,0,0,0.6 ); }
    – Mike Blair
    Commented Jan 26, 2016 at 15:42
  • And assuming if I change 0,0,0,0.6 to 0,0,0,0.5 I should see a difference but I am not :-(
    – Mike Blair
    Commented Jan 26, 2016 at 15:43
  • Open dev tools and see if your css is applied. Sometimes your css might be overwritten by default css. Try to use !important and see if that works. Change 0.6 to something like 0.1 (for test purposes) just to make sure you are testing it right. Commented Jan 26, 2016 at 15:50

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.