Как на JS сделать чтобы при наведении часть картинки просвечивала?
Нужно взять две картинки, одну из них расположить под другой, как это сделать понятно, position:absolute и z-index, но основная задача в том, что бы при наведении мышкой или при нажатии в какую то часть этой картинки (квадрат, круг, треугольник, не важно) эта часть, размером например 64х64 просвечивала и была видна картинка с меньшим z-index.
Как это сделать вообще в голову не приходит, предполагаю, что нужно использовать canvas, но всё равно не представляю в какую сторону копать.
Это можно сделать используя css свойство clip-path
По разному работает в chrome и firefox
Вот этим можно сгенерировать svg маску, а заодно посмотреть внутрь cssplant.com/clip-path-generator
будет я думаю
особенно если в статике, то не так сложно, наложить один на другой и все
а если анимировать то придется повозиться чтобы везде работало
я вот для этой штуки делал что-то подобное, тут два слоя и обрезается по трапеции. проще чем clip-path+svg способа не нашел https://worddebt.org
srnsdlmtn: Если слоёв 10 и каждый из них независим, придется каждому присваивать opacity. Если же допустим в 1 блоке 9 слоев а в другом 1 слой, то блоку,где 9 слоев нужно задать 1 раз opacity и все.
Вариантов много.
Если вам наведение нужно, то можно css одним отделаться.
Если событие клик, то можно обработчик вешать на JS, который будет управлять классами.
keslo не совсем понятно наверное, нужно чтобы не вся картинка просвечивала, а только та часть куда я навожу курсором, определённая область то есть наводишь например на нос на фотографии человека и под ним мышцы просвечивают, а всё остальное как было обычным лицом так и осталось
не совсем понятно наверное, нужно чтобы не вся картинка просвечивала, а только та часть куда я навожу курсором, определённая область то есть наводишь например на нос на фотографии человека и под ним мышцы просвечивают, а всё остальное как было обычным лицом так и осталось
