imagefy.user.js

// ==UserScript==
// @name        Imagefy
// @namespace   https://www.linux.org.ru
// @include     https://www.linux.org.ru/*
// @version     0.4.0
// @grant       none
// ==/UserScript==

const css = `
.embedded-image-container {
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.embedded-image {
  border: 1px solid #aaa;
  box-sizing: border-box;
  display: block;
  max-width: 100%;
}

.embedded-image-caption {
  background-color: rgba(15, 15, 15, 0.7);
  border: 1px solid #aaa;
  border-top: none;
  bottom: -2em;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  padding: 5px 5px;
  position: absolute;
  text-overflow: ellipsis;
  text-align: right;
  transition: bottom 0.3s ease-out;
  white-space: nowrap;
  width: 100%;
}

.embedded-image:hover + .embedded-image-caption,
.embedded-image-caption:hover {
  bottom: 0;
}
`

const style = document.createElement('style')
style.type = 'text/css'
style.innerHTML = css
document.body.appendChild(style)

const IMAGE_RE = /\.(gif|png|jpe?g)$/i

for (let anchor of document.querySelectorAll('.msg_body a')) {
  if (IMAGE_RE.test(anchor.href)) {
    if (anchor.getElementsByTagName('img').length > 0) continue;
    
    anchor.innerHTML = `
<img class="embedded-image" alt="${anchor.text}" src="${anchor.href}">
<span class="embedded-image-caption">${anchor.text}</span>
`
	anchor.classList.add('embedded-image-container')
  }
}