Эффект появления рамки при наведении курсора

Куча статей про оформление текста в красивые рамки(http://www.shpargalochki.ru/2018/02/krasivye-ramki-dlya-fotografij.html). Ещё один эффект анимации рамки от центра к краям на CSS. Можно оформить участок текста или картинку.
Реализуется просто ,в редакторе сообщений в режиме HTML.
Код

<style>.item{width:90%;margin:auto;position:relative;padding:20px;}
.item:after{display:block;content:"";width:0;height:100%;transition:all .5s linear;left:50%;right:50%;}
.item:hover:after{border:5px solid red;position:absolute;top:0;bottom:0;width:100%;left:0; right:0;}</style>

<div class="item">
Здесь участок текста, который нужно оформить в рамку.
</div>

Так же вместо текста можно и картинку вставить.

Код такой

<style>.item1{width:50%;margin:auto;position:relative;padding:20px;}
.item1:after{display:block;content:"";width:0;height:100%;transition:all .5s linear;left:50%;right:50%;}
.item1:hover:after{border:5px solid Green;position:absolute;top:0;bottom:0;width:100%;left:0; right:0;}<style>

<br />
<div class="item1">
<img src="адрес изображения" />
</div>

Если предполагаете применять такой вариант раздвижной рамки для текста часто, будет лучше, если первый код CSS разместить непосредственно в Теме блога перед строкой ]]></b:skin>. Только уберите из него открывающийся и закрывающийся теги <style> и <style>.
Потом, там где нужно, в сообщении уже прописывать код HTML с нужным текстом.
http://www.shpargalochki.ru/2018/05/effekt-poyavleniya-ramki-pri-navedenii-kursora.html