Уменьшите изображение, используя type=radio в CSSHtml

Программисты Html
Ответить
Anonymous
 Уменьшите изображение, используя type=radio в CSS

Сообщение Anonymous »

Я пытаюсь обеспечить взаимоисключающее увеличение и уменьшение изображений на странице, используя только CSS и HTML. Под взаимоисключающими я подразумеваю, что если есть два изображения, одно из которых увеличено, увеличенное изображение должно уменьшиться, если я увеличу второе изображение (просмотр фрагмента кода). Эта функция работает отлично, за исключением того, что я больше не могу уменьшить изображение.

Как это исправить?

Код: Выделить всё

input[type=radio] {
display: none;
}

.container img {
width: 100%;
transition: transform 0.25s ease;
cursor: zoom-in;
}

input[type=radio]:checked + label > img {
transform: scale(2.5);
cursor: zoom-out;
}

img {
width: 100px!important;
height: 60px;
}

Код: Выделить всё



[img]https://www.vintagevelo.co.uk/wp-content/uploads/2018/02/DSC_0040-768x512.jpg[/img]




[img]https://premium-cycling.com/wp-content/uploads/2018/05/FAGGIN-Campione-del-mondo-1980s-frameset-7.jpg[/img]




Подробнее здесь: https://stackoverflow.com/questions/619 ... dio-in-css
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»