Оригинальное оформление баннера или картинки в BLOGGER

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

В своё время я писала как сделать красивое всплывающее описание у картинок. Что - то подобное было и в этом посте. Принцип создания таких эффектов практически везде одинаковый. Поиграться со стилями CSS можно сделать и такой вариант, который сегодня предлагаю. При наведении на изображение, текст будет выезжать слева.

Чтобы увидеть результат того, как это работает, скопируйте код, предложенный ниже и вставьте его в форму проверки на этой странице. При желании там же можно сделать свои настройки. Потом разберём некоторые из них.

<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy6lMihvfEpoTw-hzRD2NDnBt56khE4dmQkdrWp8SjaBLRRkj1JNPqSrDJKXD2x5pkO2bI0KS0Jkx8LyU8qwDQv2QxHoYaI6l4Yl887MX_DIpUarLDn5YlSO3SnaYBt6C1U7Uf-oECBjV-/s200/%25D1%2581%25D0%25BB%25D0%25B0%25D0%25B9%25D0%25B4%25D0%25B5%25D1%2580.jpg " alt="шпаргалки" />
<figcaption>
<h2>Красивый слайдер CSS</h2>
<p>Красивый слайдер на CSS c всплывающим описанием. Очень просто устанавливается в гаджете HTML/JavaScript или непосредственно в сообщении блога в режиме HTML. Вам только понадобиться установить в коде свои отображаемые в слайде картинки и дать им название.</p>
<a href="http://www.shpargalochki.ru/2017/03/krasivyj-slajder-css-dlya-blogger.html">Подробнее</a>
</figcaption>
</figure>

<style>figure {
width: 280px;  /* ширина блока*/
height: 185px;  /* высота блока*/
margin: 5px;
overflow: hidden;
position: relative;
text-align: left;
-moz-box-shadow:0 5px 5px #000;
box-shadow:0 5px 5px #000;
-webkit-box-shadow:0 5px 5px #000;

cursor: default;
font:normal 12px/14px Helvetica, Arial, sans-serif;
}
figure figcaption,
figure figcaption img{
width: 285px;  /* ширина картинки*/
height: 185px;  /* высота картинки*/
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #EEEEEE;  /* фон блока с описанием*/
-moz-transform: translateX(-280px);
-o-transform: translateX(-280px);
-webkit-transform: translateX(-280px);
transform: translateX(-280px);
  visibility:hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
figure img {
width: 280px;
height: 185px;
display: block;
position: relative;
  -webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
figure h2 {
text-transform: uppercase;
color: #B22222;  /* цвет заголовка*/
position: relative;
font-size: 14px;  /* размер шрифта заголовка*/
letter-spacing: 1px;
margin: 10px 0 0 10px;
}
figure p {
font-size: 12px;  /* размер шрифта описания*/
line-height: 16px;
position: relative;
color: #333;  /* цвет шрифта описания*/
margin: 10px 10px;
-webkit-transition: all 0.5 ease-out;
-moz-transition: all 0.5 ease-out;
-ms-transition: all 0.5 ease-out;
-o-transition: all 0.5 ease-out;
transition: all 0.5 ease-out;
}
figure a {
text-decoration: none;
color: #359CC6;
margin: 10px 10px;
}
figure a:hover {
color: #B22222;
border-bottom: 1px dotted #9F1D35;  /* размер и цвет рамки*/
}
figure:hover figcaption,
figure:hover figcaption img{
-moz-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
visibility:visible;
}
figure:hover img {
-moz-transform: translateX(280px);
-o-transform: translateX(280px);
-webkit-transform: translateX(280px);
transform: translateX(280px);
}
figure:hover p{
opacity: 3;
} </style>

В коде HTML в строке зелёного цвета поменяйте адрес картинки на свой. Соответственно название, описание и URL адрес страницы куда перейдёт пользователь по ссылке далее.

Основные настройки в стилях CSS отмечены непосредственно в коде. Размер картинки и блока с описанием width: 280px; height: 185px; Готовый код можно установить прямо в сообщении блога в режиме HTML или в гаджет HTML/JavaScript в сайдбаре или в подвале . Если у вас несколько блогов, так можно сделать рекламу основного блога на других.

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

Спасибо за Ваш визит. Увидимся.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email