0

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

  <style>
  .ms-promlink-body {
max-width:100%;
}
.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 {

max-width:100%;

width:100% !important;

}

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

ul.ms-tileview-tile-detailsListMedium {

height:160px;

padding:0;

}    
.ms-tileview-tile-titleTextMediumCollapsed{

filter: alpha(opacity=100);
opacity: 1;
color:#FFFFFF;
    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;
}
</style>
  • So what CSS have you tried that didn't work? – Danny '365CSI' Engelman Jan 26 '16 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 Jan 26 '16 at 11:19
  • So, you want the opacity permanently covering the images? – Christoffer Jan 26 '16 at 11:30
  • I want the opacity for the hover over tile (see image and arrow above) – Mike Blair Jan 26 '16 at 11:34
2

Change the background-color property for the below classes:

div.ms-tileview-tile-titleTextMediumCollapsed
.ms-tileview-tile-detailsBox

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 Jan 26 '16 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 Jan 26 '16 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. – Shashank Reddy K Jan 26 '16 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.