0

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

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

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


<figure>
<img src="https://3.bp.blogspot.com/-5fWXP5bjoDQ/WNOL0SWMitI/AAAAAAAAGlU/mHR8j8tbAusFFOc1lB5U5xbKVbOHi7OKgCLcB/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 притурка, която можете да преместите в страничната лента или в дъното на блога. Ако имате повече от един блог, така може да направите реклама на основния си блог във всички останали.
Настройките не са много. Мисля, че няма да ви бъде трудно. Ако има въпроси, задайте ги в коментарите.

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

Няма коментари :

Винаги се радвам на Вашето мнение


Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | Всички права запазени |
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита