SharePoint Online Classic - увеличьте размер раскрученной ссылки до 275 пикселей с помощью всего лишь CSS

Question

Продвигаемые ссылки сложны.Кажется, у меня проблема с элементом div.ms-tileview-tile-detailsBox.Если бы я мог сделать это прозрачным в состоянии покоя, мой код был бы «идеальным», и да, я попытался установить background-color: transparent.

Вот мой текущий код, и любая помощь приветствуется:

/* tile row height */
.ms-promlink-body {
height: 285px;
width: 870px;
}

/* tile dimensions, including space between tiles */
.ms-tileview-tile-root {
width: 285px !important;
height: 285px !important;
}

/* tile overlay dimensions - the standard blue background */
.ms-tileview-tile-content {
width: 275px !important;
height: 275px !important;
}

/* image dimensions */
.ms-tileview-tile-content img {
width:275px !important;
height:275px !important;
}

/* title and description overlay dimensions */
div.ms-tileview-tile-detailsBox {
width: 275px !important;
height: 275px !important;
}

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

.ms-tileview-tile-titleMediumCollapsed {
height: 275px;
overflow: hidden;
vertical-align: bottom;
top: 275px !important; 
}

/* title text when description not shown */
.ms-tileview-tile-titleTextMediumCollapsed {
width: 275px;
height: 40px;
position: absolute;
top: 130px; 
left: 0px;
padding: 4px 7px;
font-size: 14px;
line-height: 17px;
background-color: rgba(0, 0, 0, 0.3);
}

Спасибо.

Answer 1

Предлагаю вам предоставить скриншоты для дальнейших исследований.

Стиль CSS ниже для вашей справки:

<style type="text/css">
/* tile row height */
.ms-promlink-body {
    height: 285px;
    width: 870px;
}

/* tile dimensions, including space between tiles */
.ms-tileview-tile-root {
    width: 285px !important;
    height: 285px !important;
}

/* tile overlay dimensions - the standard blue background */
.ms-tileview-tile-content {
    width: 275px !important;
    height: 275px !important;
    background-color:#0072c6 !important;
}

/* image dimensions */
.ms-tileview-tile-content img {
    width:275px !important;
    height:275px !important;
    right:0px !important;
}

/* title and description overlay dimensions */
div.ms-tileview-tile-detailsBox {
    width: 275px !important;
    height: 275px !important;
    top:200px !important;
}

div.ms-tileview-tile-detailsBox:hover{
    width: 275px !important;
    height: 275px !important;
    top:0px !important;
}

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

.ms-tileview-tile-titleMediumCollapsed {
    height: 275px;
    overflow: hidden;
    vertical-align: bottom;
    top: 275px !important; 
}

/* title text when description not shown */
.ms-tileview-tile-titleTextMediumCollapsed {
    width: 275px;
    position: absolute !important;
    top: 10px; 
    left: 0px;
    padding: 4px 7px;
    font-size: 14px;
    line-height: 17px;
}
</style>