|
|
| Строка 1: |
Строка 1: |
| {{#css: | | {{#css: |
| .demo { | | .content { |
| position: relative;
| | display: none; |
| padding-top: 50%;
| |
| } | | } |
| .demo input { display: none; } | | |
| .demo label { transition: 3s; } | | .wrapper:active .content { |
| .demo img { | | display: block; |
| position: absolute;
| | } |
| left: 50%;
| | |
| top: 50%;
| | .content:hover { |
| max-width: 100%;
| | display: block; |
| max-height: 100%;
| | } |
| -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
| | .wrapper { |
| | position: relative; |
| | } |
| | |
| | .button { |
| | background: yellow; |
| | height: 20px; |
| | width: 150px; |
| } | | } |
| .demo label,
| | |
| .demo #vkl1:checked ~ [for="vkl1"],
| | .content { |
| .demo #vkl2:checked ~ [for="vkl2"],
| | position: absolute; |
| .demo #vkl3:checked ~ [for="vkl3"],
| | padding-top: 20px; |
| .demo #vkl4:checked ~ [for="vkl4"],
| | } |
| .demo #vkl5:checked ~ [for="vkl5"] { | | |
| position: absolute;
| | .content li { |
| left: 0;
| | background: red; |
| 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"> | | <div class="wrapper"> |
| <input type="radio" name="odin" id="vkl1"/> | | <div class="content"> |
| <input type="radio" name="odin" id="vkl2"/>
| | <li>Lorem ipsum dolor sit amet.</li> |
| <input type="radio" name="odin" id="vkl3"/>
| | <li>Consectetur adipiscing elit.</li> |
| <input type="radio" name="odin" id="vkl4"/>
| | </div> |
| <input type="radio" name="odin" id="vkl5" checked="checked"/>
| | <div class="button">Кнопка</div> |
| | |
| <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> | | </div> |
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
Кнопка
