Improvement over image component

[fcoveram]

As per the design introduced in #4563 for an enhanced version of browsing results with sensitive images, the image component requires some changes.

Description

Both versions of the component documented in the Design Library have the following changes:

Image large

• Blur layer over image has the bg-blur variable
• In hover and focus, the component shows the text "Sensitive content" inside. Center and bottom aligned

Image small

• Blur layer over image has the bg-blur variable
• The text "Sensitive content" replaces the CC license icons
• In resting state, the label has the text-secondary variable applied
• In hover and focus states, the label has the text variable applied

The alias mentioned above go as (copied from this comment):

Colors

• white-88: #FFFFFF at 88%
• black-72: #000000 at 72%

Alias

# Light theme

:root {
	bg-blur: var(white-88);
}

# Dark theme

:root {
	bg-blur: var(black-72);
}

Additional context

The tokens applied are according to #3592 project

[dhruvkb]

In the process of implementing this I have observed that the text "Sensitive content" splits into two lines for tall images. For example, see the highlighted image in this screenshot.

@fcoveram does this look okay? Would you like to suggest some changes?

[fcoveram]

That looks good to me