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


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


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

  1. Виктория, я сделала на тестовом блоге. Слайдер сам получился, раздвигается, виден текст. Но картинок нет. Вместо них пустота! Ровно картинки 300х300 сделать не могу. Получилось приблизительно. Может быть в этом все дело?

    ОтветитьУдалить
  2. Ирина, можно сделать чуть больше или меньше. А у тебя тестовый индексируется поисковиками. Если нет то и картинки могут не отображаться.

    ОтветитьУдалить
  3. Виктория, нет он не индексируется! Значит вот в чем дело. Тогда на моих блогах все получится! СПАСИБО! В новом посте поставлю слайдер. Тебе сообщу. СПАСИБО!

    ОтветитьУдалить
  4. Ирина, но всё же картинки постарайся подогнать-это важно. В той же программе Paint на компе это просто сделать.

    ОтветитьУдалить
  5. Вика, привет. Спасибо большое. Интересный вариант, получился на пробном блоге http://000149.blogspot.ru/2016/10/blog-post_29.html. Буду иногда использовать.

    ОтветитьУдалить
  6. Очень интересный эффект!!! Спасибо Вика!!!

    ОтветитьУдалить
  7. Любовь и Татьяна, спасибо вам за отзыв. Вы со своей фантазией всегда здорово всё реализуете. Это я когда тестирую всё на скорую руку.
    Татьяна, кстати, подобным образом на Вашем блоке можно и советы какие-то писать подобным способом иногда.

    ОтветитьУдалить
    Ответы
    1. Спасибо Вика, я как раз об этом подумала ))

      Удалить
    2. У Вас всё получится.

      Удалить
  8. Ирина, ты не правильно вставила адреса картинок. У тебя так
    background: https://sites.google.com/site/aiknigairina/sat-ok/0a15e71c8631cb47d41bc60fd01a1a73.jpg
    а надо
    ackground: url( https://sites.google.com/site/aiknigairina/sat-ok/d644297035a2824ced775d4a7682c23f_i-3486.jpg)

    ОтветитьУдалить
  9. Виктория! УРА! Все получилось! Посмотри Блог Кота Васьки. Я думала, что слово URL и скобки надо убрать. Сейчас и на тестовом исправлю. Может тоже получится. Еще я хотела у тебя спросить этот пост на блоге Васьки уже 101 и я в Google Search Console добавила новую карту сайта, как ты меня учила - atom.xml?redirect=false&start-index=101&max-results=100. А в Яндекс вебмастер что надо добавлять?

    ОтветитьУдалить
  10. Ирина, ничего в кодах не надо убирать. В яндекс добавляешь свой robots.txt полностью. и сайтмап вот так http://www.shpargalochki.ru/Sitemap

    ОтветитьУдалить
  11. Виктория помогите пожалуйста!!!! Не могу разобраться где брать адрес картинки

    ОтветитьУдалить
    Ответы
    1. Ольга, а где у вас находится изображение которое хотите загрузить?

      Удалить
  12. Понятно. Советую Вам загрузить фото в черновик Блоггер. И потом в редакторе перейти в режим HTML и скопировать там адрес. Черновик пока можно сохранить. Некоторые так делают. Код будет большой но нужно взять только вот такой участок href="https:// тут много много всего и заканчивается jpg. Если картинка у Вас уже опубликована и размещена в блоге-просто кликнете по ней правой кнопкой мыши и выберете копировать URL и вставляйте.
    Вообще лучше фотки с компьютера хранить не стороннем хостинге. Ведь со временем их очень много накапливается.
    Еще вариант о хранении картинок можно прочитать здесь. http://www.shpargalochki.ru/2014/08/google-sajt-kak-hranilishhe-fajlov.html

    ОтветитьУдалить
  13. Огромное Вам спасибо за ваши рекомендации, они мне помогли.А где на вашем блоге можно найти информацию про то как разместить слайд - шоу

    ОтветитьУдалить
    Ответы
    1. Ольга, приятно слышать, что информация оказалась полезной и у Вас всё получилось. Про слайд-шоу можно почитать
      http://www.shpargalochki.ru/2016/05/krasivyj-slajder-izobrazhenij.html
      http://www.shpargalochki.ru/2015/06/kak-sozdat-slaid-shou-na-yndeks-fotkah.html
      Галерея изображений http://www.shpargalochki.ru/2015/09/prostaja-galereja-miniatjur-s-jeffektom-uvelichenija-kartink.html
      Можно сделать в виде презентации http://www.shpargalochki.ru/2014/07/sdelat-prezentaciju-v-google-docs.html

      Удалить
  14. Спасибо Интересно смотрится, надо будет опробовать))

    ОтветитьУдалить
  15. А можно сделать прозрачные "Ворота"? Чтобы за картинкой было видно текст.

    ОтветитьУдалить
    Ответы
    1. Black Inari не совсем Вас поняла. Вы имеете ввиду без картинки или что.

      Удалить

Пользовательский поиск
Foto Saya
My Photo