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

Здравствуйте, друзья. Предлагаю вам слайдер на CSS без использования 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>

Подберите свои изображения и вставьте их адрес в строки, отмеченные красным цветом. Первое это картинка слева, второе - справа.

Ширину и высоту всего блока я отметила синим цветом.  Задний фон тоже. Все эти значения можно поменять на свои.

Мои картинки я взяла размером 300 x 300 px. Так они корректнее отобразились. Тут нужно будет поэкспериментировать если измените какие-то стили в коде.

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

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

Введите Ваш email