Оформяне на банер или изображение в блог

Добър ден на всички. Днес искам да ви предложа код, с който можете да оформите оригинално изображения в публикация или банер в блога. И когато курсорът е върху това изображение или банер, ще се появи кратък анонс или кратко описание за изображението или банера. Освен това ще има и директен линк към страницата на публикацията.
Преди известно време писах как да направите красиво изображение с изплаващо негово описание. А тук описах нещо подобно. Принципът на създаването на такива ефекти са почти едни и същи навсякъде. Ако си поиграете с CSS стилове може да направите и вариант, какъвто ви предлагам днес. Когато курсора на мишката е върху изображението, текстът ще изплува от лявата му страна.
За да видите резултата от това, как точно работи и изглежда, копирайте кода, който ви предлагам по-долу и го поставете във формата на проверка на тази страница. Ако желаете, на място можете и да направите свои собствени настройки. Ще разгледаме някои от тях по-долу.

<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGHqZiBeb9HRwnef5q-fxGkP08_1N6KIbrJyOTEODfTh8gBEWz8rLunpiPpUk1wiNdzsUBQegMmgPVlMLOuKsCcpQZtTjtR9IeENmFASug060r-JvCzAM53N3aK7Lrz_CyEV3cxReeHf0u/s200/%25D1%2581%25D0%25BB%25D0%25B0%25D0%25B9%25D0%25B4%25D0%25B5%25D1%2580.jpg " alt="картина" />
<figcaption>
<h2>Красив слайдер CSS</h2>
<p>Красив слайдер на CSS  изплаващо описание. Той е много лесен за инсталиране чрез HTML / JavaScript притурка или директно в публикация, но в HTML режим. Трябва само да инсталирате в кода адреса на картината, показваща се в слайдера и да сложите нейното наименование</p>
<a href=" # ">Read More</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 адреса на страницата, на която потребителят ще отиде, преминавайки по линка, с който заменете #.

➤Основнитe настройки в CSS стиловете са отбелязани в кода;

➤Размерите на изображението са ширина 280 px и височина 185px;

➤Готовия код инсталирайте директно в публикация в HTML режим или HTML/JavaScript притурка, която можете да преместите в страничната лента или в дъното на блога;

➤Ако имате повече от един блог, така може да направите реклама на основния си блог във всички останали;

Настройките не са много. Мисля, че няма да ви бъде трудно. Ако има въпроси, задайте ги в коментарите.

Радвам се, че бяхте тук. Доскоро.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: