SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Image with Overlay Buttons

This sample displays images with action buttons overlaid on the bottom of each image in a compact tile format.

Get this format View on GitHub

Shared by Sai Bandaru
Updated Sep 4, 2025

Image tiles with overlay buttons showing glass effect styling
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 200,
  "width": 350,
  "hideSelection": true,
  "formatter": {
    "elmType": "div",
    "style": {
      "padding": "10px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "border-radius": "8px",
          "overflow": "hidden",
          "box-shadow": "0 2px 8px rgba(0,0,0,0.1)"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "=[$ImageUrl]",
              "alt": "Image"
            },
            "style": {
              "width": "100%",
              "height": "160px",
              "border-radius": "8px 8px 0 0",
              "object-fit": "cover"
            }
          },
          {
            "elmType": "div",
            "style": {
              "padding": "15px",
              "margin-top": "-80px",
              "border-radius": "0 0 8px 8px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "justify-content": "center",
                  "gap": "10px"
                },
                "children": [
                  {
                    "elmType": "a",
                    "attributes": {
                      "href": "=[$Button1Url]",
                      "target": "_blank"
                    },
                    "style": {
                      "padding": "8px 16px",
                      "background-color": "rgba(0, 120, 212, 0.9)",
                      "color": "white",
                      "border-radius": "20px",
                      "text-decoration": "none",
                      "font-size": "12px",
                      "font-weight": "600",
                      "text-align": "center",
                      "min-width": "60px"
                    },
                    "txtContent": "=if([$Button1Label] == '', 'Action', [$Button1Label])"
                  },
                  {
                    "elmType": "a",
                    "attributes": {
                      "href": "=[$Button2Url]",
                      "target": "_blank"
                    },
                    "style": {
                      "padding": "8px 16px",
                      "background-color": "rgba(0, 120, 212, 0.9)",
                      "color": "white",
                      "border-radius": "20px",
                      "text-decoration": "none",
                      "font-size": "12px",
                      "font-weight": "600",
                      "text-align": "center",
                      "min-width": "60px"
                    },
                    "txtContent": "=if([$Button2Label] == '', 'View', [$Button2Label])"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionimage-overlay-buttons.json

From the contributor

How to use this sample

A custom SharePoint list formatting JSON that displays images with overlay buttons in a modern card layout, designed to work consistently across all image aspect ratios.

Summary

This improved formatting creates an attractive card-style view for SharePoint lists containing images with action buttons overlaid on the image. The solution uses absolute positioning and a consistent container height to ensure buttons appear reliably regardless of image orientation or aspect ratio.

screenshot of the sample

Features

  • Responsive Image Display: Images fill container while maintaining aspect ratio
  • Consistent Overlay Buttons: Always positioned at bottom
  • Modern Glassmorphism Design: Semi-transparent buttons with backdrop blur
  • Universal Compatibility: Works with portrait, landscape, and square images
  • Professional Styling: Clean appearance with shadows and rounded corners
  • Secure External Links: Opens in new tab with proper security attributes

View requirements

Your SharePoint list must have the following columns:

Column Name Type Description
ImageUrl Single line of text or Hyperlink URL to the image to display
Button1Label Single line of text Text for the first button
Button1Url Hyperlink URL for the first button
Button2Label Single line of text Text for the second button
Button2Url Hyperlink URL for the second button

Installation

  1. Navigate to SharePoint list
  2. Click the view dropdown (next to "All Items")
  3. Select "Create new view"
  4. Choose "Gallery" layout
  5. Name your view "Image View"
  6. Click "Create"
  7. Click the Image View dropdown
  8. Click "Format current view"
  9. Click "Advanced mode"
  10. Copy the entire JSON code from the image-overlay-buttons.json file
  11. Paste it into the formatting panel
  12. Click "Preview" to see your funnel chart
  13. Click "Save" to apply the formatting

Customization Options

Card Size

Adjust the dimensions in the root configuration:

"height": 175,
"width": 350

Troubleshooting

Buttons not showing

  • Verify all required columns exist and have data
  • Check that column names match exactly (case-sensitive)

Images not displaying

  • Ensure image URLs are accessible and valid
  • Check if images are blocked by security policies
  • Verify the ImageUrl column contains proper URLs

Buttons not clickable

  • Ensure Button1Url and Button2Url columns contain valid URLs
  • Check if external links are allowed in your SharePoint environment

Technical Details

Container Specifications

  • Height: 200px total (160px image + 40px padding)
  • Width: 350px (responsive within container)
  • Image Container: Fixed 160px height.

Customization Guide

Adjust Container Height

Change the image container height in the style:

"height": "160px"  // Standard (default)
"height": "200px"  // Taller
"height": "120px"  // Shorter

Modify Button Colors

Update button background colors:

// Button 1 (Light)
"background-color": "rgba(255, 255, 255, 0.95)"

// Button 2 (Primary) - Examples:
"background-color": "rgba(0, 120, 212, 0.95)"  // Blue (default)
"background-color": "rgba(16, 124, 16, 0.95)"  // Green
"background-color": "rgba(196, 49, 75, 0.95)"  // Red

Adjust Button Spacing

Modify the gap between buttons:

"gap": "10px"  // Standard (default)
"gap": "15px"  // Wider spacing
"gap": "5px"   // Closer spacing

Change Border Radius

Adjust corner rounding:

"border-radius": "8px"   // Standard (default)
"border-radius": "12px"  // More rounded
"border-radius": "4px"   // Less rounded
"border-radius": "0"     // Square corners

Troubleshooting

Common Issues and Solutions

Buttons not visible on certain images

  • The improved version uses absolute positioning - this should be resolved

Buttons not clickable

  • Ensure URL columns contain valid URLs with proper protocol (https://)
  • Check SharePoint external link policies

Performance issues with many images

  • Consider using optimized/resized images
  • Implement pagination if displaying many items

Image Requirements

  • Recommended size: 350px width or larger for best quality
  • Aspect ratio: Any (formatting handles all ratios)
  • File size: Keep under 5MB for optimal performance

Example Data

Here's sample data for testing:

ImageUrl Button1Label Button1Url Button2Label Button2Url
https://tenant.sharepoint.com/sites/sitename/Documents/image1.jpg Button1 https://example.com/button1 Button2 https://example.com/button2

Test Images

For testing different aspect ratios:

  • Landscape: 16:9, 4:3 ratios
  • Portrait: 3:4, 9:16 ratios
  • Square: 1:1 ratio

Sample

Solution Author(s)
image-overlay-buttons.json Sai Bandaru

Version history

Version Date Comments
1.0 Sep 04, 2025 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Keep exploring

More formats like this

Course Training Tile Cards

Modern tile card layout for displaying training courses with images, badges, and hover previews in SharePoint Gallery view.

Explore format

Picture Link Tiles - Collapsible

Creates a card-style tile view in a SharePoint list with expand and collapse functionality.

Explore format

Icon Link Tiles

This sample uses tileProps element to create tile layout on the view. This layout allow users to see the list as the promoted links app (including the power the security trimming on the items). This sample uses the Icons from the Microsoft UI Fabric. The name of the icon is referenced through an Icon field.

Explore format