Участник:Leshiy

{{#css: .demo {

 position: relative;
 padding-top: 50%;

} .demo input { display: none; } .demo label { transition: 3s; } .demo img {

 position: absolute; 
 left: 50%;
 top: 50%;
 max-width: 100%;
 max-height: 100%;
 -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);

} .demo label, .demo #vkl1:checked ~ [for="vkl1"], .demo #vkl2:checked ~ [for="vkl2"], .demo #vkl3:checked ~ [for="vkl3"], .demo #vkl4:checked ~ [for="vkl4"], .demo #vkl5:checked ~ [for="vkl5"] {

 position: absolute; 
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 visibility: hidden; opacity: 0;

} .demo #vkl1:checked ~ [for="vkl2"], .demo #vkl2:checked ~ [for="vkl3"], .demo #vkl3:checked ~ [for="vkl4"], .demo #vkl4:checked ~ [for="vkl5"], .demo #vkl5:checked ~ [for="vkl1"] {visibility: visible; opacity: 1;} }}

<input type="radio" name="odin" id="vkl1"/> <input type="radio" name="odin" id="vkl2"/> <input type="radio" name="odin" id="vkl3"/> <input type="radio" name="odin" id="vkl4"/> <input type="radio" name="odin" id="vkl5" checked="checked"/>

<label for="vkl1"><img src="http://1.bp.blogspot.com/-rMnW9I5lal0/Ue96vOUnXuI/AAAAAAAAD8M/YQd22BfQG90/s1600/obeziana.jpg"/></label> <label for="vkl2"><img src="http://2.bp.blogspot.com/-VP4M3wO_6bI/TZQTkeTitII/AAAAAAAABqI/NcFUT08viuc/s00/Risunok.jpg"/></label> <label for="vkl3"><img src="адрес_изо_3"/></label> <label for="vkl4"><img src="адрес_изо_4"/></label> <label for="vkl5"><img src="адрес_изо_5"/></label>