Красив слайдер, съчетаващ изображения с текст

Здравейте приятели. Аз ви предлагам слайдер за изображения без използване на Java и JQuery. Така той няма да се отрази значително на натоварването на блога и той ще се зарежда сравнително бързо. Инсталирането не е трудно. Всичко се прави директно в редактора на публикацията или в притурка HTML / JavaScript, по ваш избор. Този слайдер изглежда много добре на страницата. Когато движите курсора върху изображенията, те се раздвижват така, че да се отвари и покаже скрития текст, който е декориран в красив блок. Ако сте намерили приложение на такъв вариант в дизайна на блога си, копирайте в блокнот или друг текстови файл на вашия компютър този код.

<style>
.Slidebox{
float:center;
}
.cover {
position: relative;
width: 590px;
height: 282px;
margin: 20px auto;
background-color: #f7f7f7;
z-index: 1;
padding: 10px;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.left_gate{
position: absolute;
background: #DBDCDE;
bottom: 0; right: 50%;
left: 0;
top: 0;
border:1px solid #F0F0F0;
-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;
}
.cover:hover .left_gate{
right: 100%;
left: -50%;
}

.right_gate{
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border:1px solid #F0F0F0;
-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;
}
.cover:hover .right_gate{
left: 100%;
right: -50%;
}
.slide_in {
overflow: hidden;
}
.slide_in .left_gate {
background: url(картинка в ляво )#DBDCDE;
border:1px solid #F0F0F0;
}
.slide_in .right_gate {
background: url(картинка в дясно )#DBDCDE;
border:1px solid #F0F0F0;
}
.cover img {
margin-top: 15px;
}
</style>

<br />
<div class="Slidebox">
<div class="cover slide_in">
<div class="left_gate">
</div>
<div class="right_gate">
</div>
Тук е вашият скрит текст
</div>
</div>
</div>

Изберете вашите изображения и поставете URL адресите им в кода на мястото, маркирано в червено. Първият URL адрес е на изображението в ляво, а вторият - на изображението в дясно. Ширината и височината на блока са отбелязани в синьо. Фонът е в кафяво. Всички тези стойности може да промените по своему. Моите изображения в примера, който ви показвам, са с размер 300 х 300 пиксела. Така те ще се изобразят правилно. Подберете и текста, който искате да се покаже при отварянето на слайдера. Мястото му лесно ще намерите в примерния код. Може и да експериментирате в други участъци на кода. Кодът на слайдера се поставя директно в редактора на публикацията на нужното място в режим на HTML.

Пожелавам ви красиви изображения!

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

Ще съм благодарна да оцените моя труд и гласувате за блога на: