Link cover content

The Link cover content helper is used to add an overlay with text on top of a link.

The Link cover content is useful when you want to provide additional information directly over linked images or content. This can enhance user interaction by giving immediate context or details about the link.

Examples

html

<figure class="w-50">
  <a href="assets/media/sample-gallery-1.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
    <img src="assets/media/sample-gallery-1.jpg" class="aspect aspect-4x3 object-fit-cover" alt="">
    <div class="link-cover-content">+3</div>
  </a>
</figure>

<script data-of-lightbox-config="gallery-1" type="application/json">
  {
  "thumbnails": true,
  "items": [
    {
      "href": "assets/media/sample-gallery-2.jpg",
      "type": "image"
    },
    {
      "href": "assets/media/sample-gallery-3.jpg",
      "type": "image"
    },
    {
      "href": "assets/media/sample-gallery-4.jpg",
      "type": "image"
    }
  ]
  }
</script>

CSS

Variables

src/scss/_link-cover-content.scss

--#{$prefix}link-cover-content-bg: #{$link-cover-content-bg};
--#{$prefix}link-cover-content-color: #{$link-cover-content-color};
--#{$prefix}link-cover-content-font-size: #{$link-cover-content-font-size};

Sass maps

src/scss/_variables.scss

$link-cover-content-bg: rgba(0, 0, 0, .6);
$link-cover-content-color: #fff;
$link-cover-content-font-size: 1.75rem;