Участник:Leshiy: различия между версиями
Перейти к навигации
Перейти к поиску
Leshiy (обсуждение | вклад) (Содержимое страницы заменено на «Тестовая страница.») |
Leshiy (обсуждение | вклад) |
||
| Строка 1: | Строка 1: | ||
{{#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;} | |||
}} | |||
<div class="demo"> | |||
<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> | |||
</div> | |||
Версия 17:44, 27 января 2017
<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>