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

Всем, привет. На блоге уже куча статей про оформление текста в красивые рамки. Ещё один эффект анимации рамки от центра к краям на CSS. Можно оформить участок текста или картинку.

Вообще, такие не сложные динамичные детали привлекают внимание посетителей, да и дизайн выглядит более стильно и уникально. 

В Блоггере реализуется достаточно просто. В редакторе сообщений в режиме HTML.

Наведите на следующий абзац курсор, чтобы увидеть пример такой раздвижной рамки.

Lorem ipsum dolor sit amet, vim nemore conceptam id, an has iusto paulo omittam. Pro eu legere scripserit! Ad magna iisque consequuntur mei, laudem prompta prodesset ad eum, ut illud facilisi assueverit usu? Cu quas aeque per. Praesent philosophia eum ex, vel noster consequat conceptam te! Eu graeci legimus quo, an nibh tractatos eos, usu suscipit tractatos ei.

Код

<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 с нужным текстом.

Благодарю за визит и до встречи.

👇

Получайте новые сообщения с блога прямо на почту

Введите Ваш email