Spoiler alert for img

DEMO

by Denis Minov

HTML

<div class="block">
К картинке можно добавить атрибут <code>spoiler</code>
<br><br>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiwgrJeAJN-7lcy92N51uP7XzccK_p-fTSJNCXPLPSVih8wqPf" style="display: block;" spoiler>
<br><br>
Или атрибут <code>spoiler="true"</code><br>
<img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" spoiler="true">
<br><br>
А так же атрибут <code>spoiler="false"</code>, который не будет переделывать картинку в спойлер. Сделано просто для того, чтобы в дальнейшем можно было отключить через JS.
<br><br>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiwgrJeAJN-7lcy92N51uP7XzccK_p-fTSJNCXPLPSVih8wqPf" spoiler="false">
<br><br><hr><br>
Так же я добавил код, который будет заменять в тексте bb-код <code>[img-spoiler]ссылка на картинку[/img-spoiler]</code>, уже на странице в <code>&lt;img src="ссылка" spoiler&gt;</code>.
<br><br>
Пример:
<br>
<div class="message">
<h3>Что же будет в конце сериала?</h3>[img-spoiler]https://www.meme-arsenal.com/memes/87a324383b697bbcec1cfe5b0ee8031a.jpg[/img-spoiler]
</div>
</div>

CSS

img[spoiler=""], img[spoiler="true"] {opacity: 0;}
.thisSpoiler {position: relative; overflow: hidden;}
.thisSpoiler > img {display: block; opacity: 1; z-index: 1; border: 0;}
.thisSpoiler::before, .thisSpoiler::after {position: absolute; left: 0; right: 0; transition: opacity .3s linear; pointer-events: none;}
.thisSpoiler::before {content: ''; display: block; width: 100%; height: 100%; background: #000; z-index: 2; top: 0; bottom: 0;}
.thisSpoiler::after {content: 'Это изображение содержит в себе спойлер!\0aНаведите, чтобы посмотреть.'; display: inline-block; max-width: 100%; max-height: 100%; text-align: center; font-size: 12px; color: #fff; white-space: pre-line; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.thisSpoiler:hover::before, .thisSpoiler:hover::after, .thisSpoiler:active::before, .thisSpoiler:active::after {opacity: 0;}

/* Это вам не нужно */
body {margin: 0; background: transparent;}
.block {display: block; width: calc(100% - 20px); max-width: 600px; background: #ccc; padding: 10px; border-radius: 10px; box-sizing: border-box; margin: 10px auto;}
img {max-width: 100%;}
.message {border-radius: 5px; background: rgba(0,255,0,.25); padding: 10px; box-sizing: border-box;}
code {background: #fff; border-radius: 3px; color: green; padding: 2px 5px;}

JavaScript

$('.message').html($('.message').html().replace(/\[img-spoiler\]((?:http|https):\/\/\S+(?:jpg|jpeg|png|gif))\[\/img-spoiler\]/gi, '<img src=\"$1\" spoiler>'));
//
$('img[spoiler=""], img[spoiler="true"]').each(function(){
 	let style = 'display: '+($(this).css('display') == 'inline' ? 'inline-block' : $(this).css('display'))+';\
		width: '+$(this).css('width')+';\
		height: '+$(this).css('height')+';';
	$(this).wrap('<div class=\"thisSpoiler\" style=\"'+style+'\">');
});