Фото от мини до макси.

Как сделать увеличение миниатюр картинок и изображений при наведении курсора мышки без потери качества изображения при помощи CSS .Установка кода на страницы сайта или блога позволит сэкономить место используя миниатюры изображений и тем не менее даст возможность посетителям одновременно насладиться полноразмерным оригиналом.Сам код практически ничего не весит и не затруднит загрузку страниц блога.

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

Использование такого варианта показа изображений и фото весьма практично на тех блогах,где основная масса контента состоит из фото материалов и обзоров. Использование полно размерных изображений вызывает излишнее нагромождение и беспорядок.А при использовании и применении данного приёма можно самостоятельно задать минимальный размер фото исходя из дизайна и также сделать увеличение фото исходя из собственных представлений о размере предлагаемого фотоматериала. Установить код для плавного увеличения изображений и фото при наведении курсора на страницах блога очень просто.Элементарно копируем приведённый здесь код CSS и устанавливаем в шаблон блога перед закрывающим тегом ]]></b:skin>,если это Блогспот или в папку для стилей style.css для вордпрес,но следует запомнить,что установка в шаблон осуществляется без тегов <style>......</style>,а в таком виде устанавливается или на страницу или в соответствующий гаджет.

<style type="text/css">
.vgol55 {position:relative; margin-left:10px; margin-bottom:100px; z-index:500;}
.vg32 {position:absolute; left:0; top:0;}
.slide {display:block; border:0; text-decoration:none; float:left; border-right:1px solid #fff;}
.last {border:0;}.slide img {display:block; border:0;
width:50px; height:50px; /* размер миниатюры */
cursor:pointer;-webkit-transition-duration: .7s;
-moz-transition-duration: .7s;-o-transition-duration: .7s;transition-duration: .7s;
}.slide:hover img {width:350px; height:400px;} /* размер полного фото */
</style>

<div class="vgol55"><div class="vg32">
<a class="slide" aria-haspopup="true"><img class="a1" src="ссылка на изображение" alt="" /></a>
<a class="slide" aria-haspopup="true"><img class="a2" src="ссылка на изображение" alt="" /></a>
<a class="slide" aria-haspopup="true"><img class="a3" src="ссылка на изображение" alt="" /></a>
<a class="slide" aria-haspopup="true"><img class="a4" src="ссылка на изображение" alt="" /></a>
<a class="slide" aria-haspopup="true"><img class="a5" src="ссылка на изображение" alt="" /></a></div></div>

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

Фотоэффекты онлайн-подмена фотоКартинки две в одной,как вставитьКак и где убрать фон с картинки