Эффект смены изображения на CSS.


Всем, привет. Предлагаю вам интересный эффект смены изображения на CSS. Заранее приготовьте 2 картинки. Потом скопируйте себе в блокнот приведённый ниже код, вместо адрес картинки укажите путь к этому изображению (URL).
Готовый код вставляем в редакторе сообщения в режиме HTML или в гаджет HTML/JavaScript.



Ещё красивые эффекты для картинок.

Код

<style>
  #v-b {
    position:relative;
    height:250px;
    width:250px;
    margin:0 auto;
  }
  #v-b img {
    position:absolute;
    left:0;width:240px;height:240px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

  #v-b img.top {
    -webkit-transform:scale(5,0);
    -moz-transform:scale(5,0);
    -o-transform:scale(5,0);
    transform:scale(5,0);
    opacity:0;

  }

  #v-b:hover img.top, #cf4.hover_effect img.top {
    opacity:1;
    -webkit-transform:scale(1,1);
    -webkit-transform-origin: top right;
    -moz-transform:scale(1,1);
    -moz-transform-origin: top right;
    -o-transform:scale(1,1);
    -o-transform-origin: top right;
    transform:scale(1,1);
    transform-origin: top right;
  }
  #v-b:hover img.bottom, #cf4.hover_effect img.bottom {
    -webkit-transform:scale(0,0);
    -webkit-transform-origin: bottom left;
    -moz-transform:scale(0,0);
    -moz-transform-origin: bottom left;
    -o-transform:scale(0,0);
    -o-transform-origin: bottom left;
    transform:scale(1,0);
    transform-origin: bottom left;
  }</style>
<div id="v-b " class="hover">
    <img class="bottom shadow" src="адрес фото 1" />
    <img class="top shadow" src="адрес фото 2" />
</div>

Можно поменять значение transform:scale(5,0); на своё и тогда эффект смены изображения будет немного другим. Размеры отображаемых картинок заданы значениями  height:250px; и width:250px; - тоже на ваше усмотрение.

Совет! Код устанавливайте после того, как сообщение будет уже написано, перейдя в режим HTML в нужное место. И после этого сразу публикуйте, не переходя в обычный. Иначе результата может не быть.

Не занимаю больше ваше драгоценное время. Спасибо за внимание и до новых встреч.

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

Введите Ваш email


8 комментариев:

  1. Класс! интересный эффект.

    ОтветитьУдалить
  2. Виктория! ЗДОРОВО! УРА! Мне как раз этот эффект скоро пригодится для Блога Кота Васьки! Скажу по секрету: с января появится у меня соавтор.

    ОтветитьУдалить
  3. Виктория, ничего не получается у меня на тестовом блоге. Вставила код и в сообщение и в гаджет! Получилось и там и там - две картинки рядом! Не никакой смены изображений! Картинки должны быть одинакового размера? Поработаю с размерами!

    ОтветитьУдалить
  4. Ирина, что-то не так сделано. Везде работает. Размер картинок не при чём. Они в коде заданы. Посмотри может картинки в htpp. Сейчас ведь это может к сбою приводить. Кинь свой код на почту мне.v.barad@mail.ru
    Или попробуй простую смену ссылка на тот пост в сообщении.

    ОтветитьУдалить
  5. ВИКТОРИЯ, СПАСИБО! СПАСИБО! СПАСИБО! Я пока поставила на тестовый блог "БиблиоИрина". Все получилось! Мне нужна смена изображений на Блог Кота Васьки к 27 декабря, когда блогу исполнится 1 год И появится ещё один автор блога.

    ОтветитьУдалить
  6. Пожалуйста Ирина. Успехов.

    ОтветитьУдалить
  7. Вика, очень интересное решение, но у меня тоже получились две картинки рядом почему-то, адреса как обычно вставляю! И еще можно к вам обратиться по оформлению 3д постера, в тестовом блоге probtestez.blogspot.ru/2016/10/3-d-poster.html, я попыталась это сделать, у меня 1.проявился список в левом верхнем углу картинки; 2. на обороте картинка меньше чем в оригинале, уменьшилась в 2 раза в длину? (оригинал- sitehere.ru/examples/25.12.2013/index.html) а данные я взяла вот здесь (sitehere.ru/3d-postery-v-vide-boksov). Очень эффектная штучка, хочется ее использовать! С уважением Тата.

    ОтветитьУдалить
  8. Tata там написано Для браузеров которые не поддерживают 3D трансформации нужно использовать библиотеку Modernizr.js, Обратитесь Юрию, автору кода, он обычно отвечает, знаю его.
    Не стоит наверное столько всего в один блог толкать.

    ОтветитьУдалить

Пользовательский поиск