Креативные эффекты для фото.

Эффекты подмены для фото и изображений на CSS.Простое креативное решение для трансформации изображений при создании веб-страниц.Добавить изюминку своим фото и картинкам можно просто установив небольшой код CSS,который впоследствии будет отвечать за все изображения на блоге,которым будет присвоен соответствующий класс.Данные дополнения добавят креатива вашим страницам и оживят их.

Установка кода для спецэффектов.

Установка стилей CSS происходит в стандартном режиме и ничем не отличается от установки других стандартных кодов.Копируем данный код и устанавливаем в шаблон блога перед закрывающим тегом ]]></b:skin> убрав теги <style>....<style> или же просто устанавливаем весь код в любой гаджет поддерживающий HTML и JavaScript.Для одноразового применения нужно скопировать весь код целиком и в процессе редактирования вставить где нибудь в самом конце статьи,чтобы не путался под ногами.

  <style>
  #v-g72 {
    position:relative;
    height:250px;
    width:250px;
    margin:0 auto;
  }
  #v-g72 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-g72 img.top {
    -webkit-transform:scale(3,0);
    -moz-transform:scale(3,0);
    -o-transform:scale(3,0);
    transform:scale(3,0);
    opacity:0;

  }

  #v-g72: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-g72: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>

Как установить гаджет для выделения текста?

Закончив манипуляции с кодом CSS можно приступать к оформлению своих картинок и добавить немного креатива применяя данный эффект трансформации.Для этого следует просто оба изображения заключить в контейнер следующего вида,вставив в соответствующие место адреса своих картинок или фото.


<div id="v-g72" class="hover">
    <img class="bottom shadow" src="адрес фото" />
    <img class="top shadow" src="адрес фото" />
</div>

Настройки эффекта трансформации.

Изображения автоматически подгоняются под один размер и изменить величину по умолчанию можно заменив соответственно в коде CSS позиции width:240px;height:240px; на свои устраивающие вас параметры.Также можно поменять визуальный эффект подмены изображений изменив значение transform:scale(3,0) на другое.Настроить под себя данный код для трансформации можно воспользовавшись онлайн редактором для настройки и проверки работы кодов и скриптов