Как реализовать шторку на двух кратинках?
Возник такой вопрос, как реализовать блок на скрине., или может есть готовые штуки уже. Обьясню что происходит, есть две картинки, они накладываются друг на друга, я так понимаю с помощью свойства clip мы делаем их по половине, и вот в центре есть что-то типо ползунка-шторки, и когда тянешь её например влево, то начинает показываться картинка больше правая, а если тянуть в право то наоборот, может есть у кого идеи как это реализовывать?
Дополнительно:
Такого добра полно на codepen. Ищите что-то типа слайдер before-after
clip там не нужен, достаточно обычного флекса и overflow
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации шторки на двух изображениях вам понадобится использовать HTML и CSS. Вот пример кода, который поможет вам достичь желаемого эффекта:
HTML:
<div class="curtain"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> </div>
CSS:
.curtain { position: relative; width: 500px; /* Замените на нужную вам ширину */ height: 300px; /* Замените на нужную вам высоту */ overflow: hidden; } .curtain img { position: absolute; top: 0; transition: transform 0.5s; } .curtain img:nth-child(2) { transform: translateY(100%); } .curtain:hover img:nth-child(2) { transform: translateY(0); }
Этот код создаст контейнер с двумя изображениями, где одно изображение будет скрыто за другим. При наведении курсора на контейнер, второе изображение плавно выезжает на вид. Вы можете настроить ширину, высоту и другие стили в соответствии с вашим дизайном.
Не забудьте заменить "image1.jpg" и "image2.jpg" на пути к вашим изображениям. А также адаптировать ширину и высоту контейнера под ваши нужды.
Надеюсь, этот ответ поможет вам реализовать шторку на двух изображениях на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их. Удачи!