У меня есть картинка в карточке. Я хочу, чтобы по умолчанию для обычных пользователей отображалась лишь часть ее (например, рандомный квадрат с шириной, равной 10% от размера картинки). Я делаю это через добавление поверх картинки div c background: rgba(0, 0, 0, 1);. Если сделать этому квадрату фиксированное положение, я понимаю, что это можно реализовать с помощью 4-х div, спозиционированных таким образом, чтобы в каком-то месте между этими divами оставалась брешь и была видна часть картинки. Первый вопрос, можно ли реализовать подобное, используя 1 div через гриды, то есть убирая background конкретной ячейке? Второй, как реализовать, чтобы этот квадрат был рандомно расположен на картинке с помощью react c помощью тех же гридов, или как то передавать данные вычислений случайных координат в свойства тех самых 4 divов?
1 ответ
В данном примере в качестве маски используется свойство box-shadow
у абсолютно позиционированного псевдоэлемента, размещенного поверх картинки.
По клику положение псевдоэлемента меняется случайным образом, принимая значения кратные его ширине (10%).
const picture = document.getElementById('picture');
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function cutPicture() {
let shiftTop = getRandomInt(0,9) * 10 + '%';
let shiftLeft = getRandomInt(0,9) * 10 + '%';
picture.style.setProperty('--top', shiftTop);
picture.style.setProperty('--left', shiftLeft);
}
picture.addEventListener('click', e => { cutPicture() });
cutPicture();
#picture {
background-image: url(https://i.ytimg.com/vi/2giQVPIl9JM/maxresdefault.jpg);
background-size: cover;
width: 100vh;
height: 100vh;
position: relative;
overflow: hidden;
--top: 0;
--left: 0;
}
#picture::after {
content:'';
position: absolute;
width:10%;
height:10%;
top: var(--top);
left: var(--left);
box-shadow: 0px 0px 0px 100vh rgba(255,255,255,0.95);
}
<div id="picture"></div>