Эффекты трансформации для фото.

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

Установка кода для увеличения фото.

Для установки кода для увеличения изображений не потребуется много времени.Всё прописано в CSS и соответственно нужно скопировать данный код и внести в шаблон или в папку для стилей.Пример в начале поста.

<style type="text/css">
img.expand { width: 5em; /* размер миниатюры */}
.hv-g {
 position: relative;
 display: inline-block;
 -moz-transition: all 1s ease;
 -webkit-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s ease;
}
.hv-g:hover {
 opacity: 0.9;
 -moz-transform: scale(5) rotate(720deg) translate(1px);
 /* WebKit */
 -webkit-transform: scale(5) rotate(720deg) translate(1px);
 -o-transform: scale(5) rotate(720deg) translate(1px);
 transform: scale(5)rotate(720deg) translate(1px);
 z-index: 1000; /* Foto v-gol.ru css */
}</style>

Как установить гаджет для оформления текста.

Практически на этом вся работа по установке кода и завершена,осталось только при написании статьи заключить необходимые участки текста или фотографии,которым требуется применить данный эффект в контейнер такого вида.

    <div class="hv-g">Ваш текст или фото</div>

Настройки кода для увеличения.

Если миниатюра фотографии не устраивает вас и слишком велика или мала,то можно автоматически исправить этот недостаток добавив к коду изображения небольшой фрагмент class="expand".В итоге ваш код HTML картинки должен выглядеть таким образом.

<img border="0" src="урл картинки" class="expand" />

Изменить размер миниатюры можно поменяв значение в коде

•  img.expand { width: 5em; - размер миниатюры
• transform: scale(5) - увеличенная картинка
• rotate(720deg) - сколько оборотов должно совершить фото
• transition: all 1s - трансформация по времени
• opacity: 0.9;- прозрачность фото или текста

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

Пример трансформации.

Смотреть ещё Слайдер- ротатор для блогаРотатор для баннеровЭффекты для фото на CSS.Как добавить форум на блогОформление блоков для кода