Missing indication that image is linked

[panr]

📝 Provide a description of the improvement

Right now there is no major visual difference between a linked image and a "normal" image. Both look the same, and the only small difference is that the linked image has pointer cursor on :hover and after clicking it LinkImageUI component button is enabled.

NOTE: Linked image has a caption set.

Follow-up on: #7452

--
If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Reinmar]

BTW, the .image > a misses display: block.

For now, in the docs, I used this style:

	.image > a {
		display: block;
		border: solid 2px #1b3af2; /* The color of the link text on this page. */
	}

But that looks rather bad.

[Reinmar]

I had to work a bit more for the purpose of the demo and came up with this:

The CSS (yep, IDK CSS :D)

	.image > a {
		display: block;
	}

	.image > a::after {
		content: '';
		display: block;
		position: absolute;
		top: 10px;
		right: 10px;
		width: 20px;
		height: 20px;
		background-color: rgba(255,255,255,0.3);
		border: solid 1px rgba(255,255,255,0);
		border-radius: 3px;
		filter: invert(90%);
		background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.077 15l.991-1.416a.75.75 0 1 1 1.229.86l-1.148 1.64a.748.748 0 0 1-.217.206 5.251 5.251 0 0 1-8.503-5.955.741.741 0 0 1 .12-.274l1.147-1.639a.75.75 0 1 1 1.228.86L4.933 10.7l.006.003a3.75 3.75 0 0 0 6.132 4.294l.006.004zm5.494-5.335a.748.748 0 0 1-.12.274l-1.147 1.639a.75.75 0 1 1-1.228-.86l.86-1.23a3.75 3.75 0 0 0-6.144-4.301l-.86 1.229a.75.75 0 0 1-1.229-.86l1.148-1.64a.748.748 0 0 1 .217-.206 5.251 5.251 0 0 1 8.503 5.955zm-4.563-2.532a.75.75 0 0 1 .184 1.045l-3.155 4.505a.75.75 0 1 1-1.229-.86l3.155-4.506a.75.75 0 0 1 1.045-.184z"/></svg>');
	}

[panr]

R-

Please change rgba to hsla 😛