Gallery item - remove hover select capability/styling

[josh_vts]

Hi all,

I have a list in gallery view with items customized via JSON formatting.

I set it up where clicking on an item takes you to a custom link (in the list record). However, part of the initial hover effects remain, particularly, the circle in the top right that enables a user to select the item. 

Is there a way to get rid of this circle/capability on hover? Please see the screenshot for reference.

Thanks so much!

[#2]

@josh_vts You mentioned an issue where you have a SharePoint list in gallery view with custom JSON formatting applied. While you've set it up to navigate to a custom link when an item is clicked, there's an unwanted hover effect that displays a circular selection icon in the top-right corner. You'd like to remove this hover effect and the associated selection capability.

To address this requirement, I'll leverage CSS overrides within the view layout settings of your SharePoint list. First, I'll open the list and switch to the gallery view you've customized. Then, I'll access the view editing pane by clicking on the ellipsis menu next to the view name and selecting "Edit current view." Within the view editing pane, I'll navigate to the "View layouts" section under "Customization" and locate the JSON code editor. Here, I'll add a specific CSS override that targets the hover effect on the selection icon. The override will set the visibility of this element to "hidden," effectively removing the circular selection icon from appearing on hover. The CSS override code I'll add is as follows:

```json
"viewStyles": {
  "overrides": {
    ".ms-DetailsRow-fields": {
      ".ms-DetailsRow-cell:hover .ms-DetailsRow-selection": {
        "visibility": "hidden"
      }
    }
  }
}
```

After adding this code within the appropriate section of the JSON, I'll save the changes and exit the view editing mode. With this CSS override applied, the circular selection icon should no longer appear when hovering over the gallery items in your list. However, it's important to note that this approach uses CSS overrides, which can be affected by future updates to SharePoint or the list view styles.

If the styles change in the future, I may need to update the CSS overrides accordingly. Additionally, if you have any other custom styling applied to the list view, I'll ensure there are no conflicting styles that might override this change. Throughout this process, I'll maintain open communication with you and address any concerns or additional requirements you may have, such as removing other hover effects or applying more extensive customizations.

[#3]

@BarryGoblon 

Wow, thank you for this.

I tried inserting your code in numerous places, but unfortunately with no success.

Perhaps you could point me in the right direction. With the code below, I tried inserting it after line 6, then the next element down after line 8, then the next element down after line 14, and so on. They seem to have no effect on changing the undesired hover behavior of letting the user 'select' the item.

I truly appreciate your time and effort! 

Here is the JSON code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 415,
  "width": 300,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "href": "[$Link]"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "style": {
          "background-color": "#15498A"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-imageContainer"
                },
                "children": [
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-bgColor-neutralLight sp-card-imagePreviewBackground"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "display": "=if([$Image] == '', 'none', '')"
                        },
                        "attributes": {
                          "src": "=getThumbnailImage([$Image], 500, 500)",
                          "title": "[$Image.fileName]",
                          "class": "sp-card-imagePreview"
                        }
                      },
                      {
                        "elmType": "svg",
                        "style": {
                          "display": "=if([$Image] == '', '', 'none')"
                        },
                        "attributes": {
                          "preserveAspectRatio": "none",
                          "viewBox": "0 0 210 105",
                          "class": "sp-card-defaultImage ms-bgColor-themeLighter"
                        },
                        "children": [
                          {
                            "elmType": "path",
                            "attributes": {
                              "id": "sp-card-defaultImage-path1",
                              "d": "M0 25.7896L126.5 53.8817L96 105H0V25.7896Z"
                            }
                          },
                          {
                            "elmType": "path",
                            "attributes": {
                              "id": "sp-card-defaultImage-path2",
                              "d": "M96 105L158.7 0H204C207.314 0 210 2.68629 210 6V105H96Z"
                            }
                          }
                        ]
                      },
                      {
                        "elmType": "svg",
                        "style": {
                          "display": "=if([$Image] == '', '', 'none')"
                        },
                        "attributes": {
                          "class": "sp-card-defaultImageOverlay",
                          "viewBox": "0 0 40 40"
                        },
                        "children": [
                          {
                            "elmType": "path",
                            "attributes": {
                              "id": "sp-card-defaultImageOverlay-path1",
                              "d": "M 4 4 H 37 V 37 H 4 L 4 4"
                            }
                          },
                          {
                            "elmType": "path",
                            "attributes": {
                              "id": "sp-card-defaultImageOverlay-path2",
                              "d": "M24.17 21.151L21.66 24.741L17.54 19.191C17.3322 18.914 17.0062 18.751 16.66 18.751C16.3137 18.751 15.9877 18.914 15.78 19.191L9.20997 28.051C8.97126 28.3786 8.93818 28.813 9.12453 29.173C9.31088 29.533 9.68465 29.7567 10.09 29.751H29.91C30.3085 29.7562 30.6769 29.5396 30.866 29.1887C31.0551 28.8378 31.0335 28.411 30.81 28.081L26 21.151C25.7991 20.8407 25.4546 20.6533 25.085 20.6533C24.7153 20.6533 24.3709 20.8407 24.17 21.151Z"
                            }
                          },
                          {
                            "elmType": "path",
                            "attributes": {
                              "id": "sp-card-defaultImageOverlay-path3",
                              "d": "M28 15.751C29.3807 15.751 30.5 14.6317 30.5 13.251C30.5 11.8703 29.3807 10.751 28 10.751C26.6193 10.751 25.5 11.8703 25.5 13.251C25.5 14.6317 26.6193 15.751 28 15.751Z"
                            }
                          },
                          {
                            "elmType": "path",
                            "attributes": {
                              "id": "sp-card-defaultImageOverlay-path4",
                              "d": "M4.5 37.251H35.5C36.3284 37.251 37 36.5794 37 35.751V4.75098C37 3.92255 36.3284 3.25098 35.5 3.25098H4.5C3.67157 3.25098 3 3.92255 3 4.75098V35.751C3 36.5794 3.67157 37.251 4.5 37.251ZM4 4.75098C4 4.47483 4.22386 4.25098 4.5 4.25098H35.5C35.7761 4.25098 36 4.47483 36 4.75098V35.751C36 36.0271 35.7761 36.251 35.5 36.251H4.5C4.22386 36.251 4 36.0271 4 35.751V4.75098Z"
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "style": {
              "background-color": "#15498A"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "style": {
                  "padding": "1.5rem 0",
                  "color": "white",
                  "font-size": "1.75rem",
                  "text-align": "center"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "justify-content": "center"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "height": ".35rem",
                  "width": "90%",
                  "background-color": "=substring([$Accent_x0020_color], indexOf([$Accent_x0020_color], '#'), 99)"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "style": {
              "height": "100%",
              "background-color": "#15498A"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Short_x0020_description]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "style": {
                  "padding": "0.75rem 0.75rem",
                  "height": "100%",
                  "color": "white",
                  "white-space": "normal",
                  "word-break": "normal"
                },
                "txtContent": "=if ([$Short_x0020_description] == '', '–', [$Short_x0020_description])"
              }
            ]
          }
        ]
      }
    ]
  }
}

[#4 · Accepted solution]

@josh_vts Hey, not sure if you solved this already, but you can disable the check box - you just need to adjust the JSON for the HideSelection property to be true.

This is set to false by default.

"hideSelection": true,

People can still hover over the card and it will show the hover effect but it won't show that circle.

[#5]

@HelloBenTeoh 

Thank you so much!

Exactly what I was looking for.