Interactive image

Two ratio versions avaiable:

  • 16:9 - rc-interactive-image__wrapper rc-interactive-image__wrapper--16-9
  • 4:3 - rc-interactive-image__wrapper rc-interactive-image__wrapper--4-3
Attributes needed for this component:
  • data-js-top sets the position in % from the top
  • data-js-right sets the position in % from the right
  • data-js-bottom sets the position in % from the bottom
  • data-js-left sets the position in % from the left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text about image
html
            <figure class="rc-bg-image rc-fixed-ratio rc-fixed-ratio--16-9" style="background-image: url(' /assets/images/Content-Block_boxer-puppy_cutout_800px.png' )">
  <div class="rc-interactive-image">
    <div id="plus-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-plus--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Plus" data-tooltip="plus-tooltip" data-tooltip-placement="left" data-js-icon-button="" data-js-top="9%" data-js-right="" data-js-bottom="" data-js-left="30%">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="sustainable-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-sustainable--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Sustainable" data-tooltip="sustainable-tooltip" data-tooltip-placement="right" data-js-icon-button="" data-js-top="51%" data-js-right="34%" data-js-bottom="" data-js-left="">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="food-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-food--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Food" data-tooltip="food-tooltip" data-tooltip-placement="bottom" data-js-icon-button="" data-js-top="" data-js-right="" data-js-bottom="6%" data-js-left="23%">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
  </div>
  <figcaption class="rc-screen-reader-text">Text about image</figcaption>
</figure>
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text about image
html
            <figure class="rc-bg-image rc-fixed-ratio rc-fixed-ratio--4-3" style="background-image: url(' /assets/images/russian-blue-cat.jpg' )">
  <div class="rc-interactive-image">
    <div id="groomer-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-groomer--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Groomer" data-tooltip="groomer-tooltip" data-tooltip-placement="left" data-js-icon-button="" data-js-top="18%" data-js-right="" data-js-bottom="" data-js-left="52%">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="vet-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-vet--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Vet" data-tooltip="vet-tooltip" data-tooltip-placement="right" data-js-icon-button="" data-js-top="63%" data-js-right="30%" data-js-bottom="" data-js-left="">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="nutritional-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-nutritional--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Nutritional" data-tooltip="nutritional-tooltip" data-tooltip-placement="top" data-js-icon-button="" data-js-top="" data-js-right="" data-js-bottom="11%" data-js-left="17%">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
  </div>
  <figcaption class="rc-screen-reader-text">Text about image</figcaption>
</figure>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo