Эффект смены изображения на 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