Картинки от мини до макси.

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

Пример установки кода.

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

 <style>.v-gol {width:500px; height:60px; margin:20px auto;}/* ширина и высота блока */ input {position:absolute; left:-9999px; display:none;} label.toggle {display:block; width:80px; height:60px; margin:10px; position:relative; cursor:pointer; float:left; z-index:10; -webkit-transition: 0s 1s;-moz-transition: 0s 1s;-o-transition: 0s 1s; transition: 0s 1s;}label.toggle img {display:block; width:80px; height:60px; -webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out;transition: 1s ease-in-out; }input:checked + label {z-index:100;-webkit-transition: 0s; -moz-transition: 0s;-o-transition: 0s;transition: 0s;}input:checked + label img { -webkit-transform:scale(8);/* параметры трансформирования */ -moz-transform:scale(8);/* параметры трансформирования */ -o-transform:scale(8);  /* параметры трансформирования */ transform:scale(8);  /* параметры трансформирования */ }</style>

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

<input type="checkbox" id="image1" /><label for="image1" class="toggle"><img src="http://Ссылка на изображение" alt="" /></label>  

Сам же блок  уже позиционированный стилями CSS должен быть заключён между тегами <div>.....</div>.Ниже приведён код для размещения пяти миниатюр в блоке,которые гармонично впишутся в тело сообщения и не займут много места,но при клике на которое можно будет в увеличенном режиме полюбоваться на всю красоту в полном объёме.Если кто не знает,то ссылку на изображение можно получить кликнув правой кнопкой мышки на картинку и скопировать там её адрес.

  <div class="v-gol"> <input type="checkbox" id="image0" /><label for="image0" class="toggle"><img src="http://Ссылка на изображение" alt="" /></label> <input type="checkbox" id="image1" /><label for="image1" class="toggle"><img src="http:/Ссылка на изображение/" alt="" /></label> <input type="checkbox" id="image2" /><label for="image2" class="toggle"><img src="http://fytzal.ru/Ссылка на изображение" alt="" /></label> <input type="checkbox" id="image3" /><label for="image3" class="toggle"><img src="http://Ссылка на изображение" alt="" /></label> <input type="checkbox" id="image4" /><label for="image4" class="toggle"><img src="http://Ссылка на изображение" alt="" /></label> </div>

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

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

Просто быстро доступно и красиво.При желании можно и горы своротить,а не только картинку увеличить.Если будут какие-то вопросы отпишитесь в комментариях.Ну а если вопросов нет,то можно плюсануть пост.