Увеличение фото с помощью GSS.



Плавное увеличение картинок и изображений без потери качества на GSS.Эффект подобного типа увеличения при наведении курсора мышки на фото часто встречается при размещении тизеров от различных партнёрских программ.Код настраиваемый и легко встраиваемый и отсутствие ЯВА скрипт не тормозит загрузку страницы.





Куда вставить код GSS для увеличения изображений.



В идеале конечно же нужно вставить код с настройками GSS в шаблон блога перед закрывающимся кодом </b:skin>, но если эта процедура доставляет вам излишние хлопоты и проблемы,то код можно будет вставить в гаджет нтмл и ява скрипт.Для этих целей можно специально добавить лишний гаджет и всё копировать туда.Можно также добавить просто на страницу в конце сообщения,но тогда он будет работать лишь на этой странице.Код для увеличения также будет работать и в других GSM.

Код увеличения изображений и фото при наведении курсора мышки.


Ниже размещён непосредственно сам код,который будет увеличивать наши изображения.Это та часть которую стоит добавить в гаджет HTML.
<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}</style>

Дальше то что следует добавить к изображениям на которых планируется воспроизведение эффекта плавного увеличения.
 
<div class="hovergallery">изображение </div>

Обратите внимание,что каждое изображение или группа изображений находились внутри контейнера заключённого в
  <div>..</div>. Весь контейнер с картинкой должен быть такого вида:

<div class="hovergallery"><img src="http:// адрес картинки" /></div>


Настройки кода для плавного увеличения изображений.


К настройкам можно отнести размеры увеличения картинки при наведении курсора мышки. Изменяя значение выделенное красным на большее можно существенно увеличить размер. Так же можно посмотреть второй способ увеличения изображений,который будет отвечать одновременно за все картинки размещённые на страницах без дополнительного вмешательства.
Плавное увеличение всех изображений на блоге.



Не стоит суетиться .
Пора определиться.



Не стоит искать халяву.
Стоит немного и
поработать.



Тизерная реклама без
шок контента.Высокая
оплата за клик.



Деньги можно хранить
в сберкассе,а работать
стоит с нами.







Отправить комментарий