I have been sitting for quite a long time and do not understand how this can be done. Here's what has https://jsfiddle.net/0awf48ph/4/

<body> <div class="man"> <div class="layer one"><img src="https://pp.vk.me/c629508/v629508415/40ce7/CtRaieuocgI.jpg" /></div> <div class="layer two"><img src="https://pp.vk.me/c629508/v629508415/40cee/d6A-zb9DkE8.jpg" /></div> <div class="layer three"><img src="https://pp.vk.me/c629508/v629508415/40cf5/jJ3BSQjtN0k.jpg" /></div> <div class="layer four"><img src="https://pp.vk.me/c629508/v629508415/40cfc/ylHeXQAGELo.jpg" /></div> <div class="layer five"><img src="https://pp.vk.me/c629508/v629508415/40d17/IKbiBKXERrQ.jpg" /></div> <div class="layer six"><img src="https://pp.vk.me/c629508/v629508415/40d1e/BdsbtwhE25o.jpg" /></div> <div class="layer seven"><img src="https://pp.vk.me/c629508/v629508415/40d25/Ygb435oYnIY.jpg" /></div> <div class="layer eight"><img src="https://pp.vk.me/c629508/v629508415/40d2c/EGOvaKEA-kY.jpg" /></div> </div> <div class="the hole"></div> <svg width="0" height="0"> </svg> </body>

css

 .man { width: 600px; height: 500px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; overflow: auto; } .layer { position: absolute; transition: .3s; } .one { z-index: 10; opacity: 1; } .two { z-index: 9; opacity: 1; } .three { z-index: 8; opacity: 1; } .four { z-index: 7; opacity: 1; } .five { z-index: 6; opacity: 1; } .six { z-index: 5; opacity: 1; } .seven { z-index: 6; opacity: 1; } .eight { z-index: 5; opacity: 1; } .hole { position: absolute; width: 20%; height: 20%; z-index: 11; opacity: 1; border: 2px solid black; overflow: hidden; background-image: url("images/1.png"); } body:hover .layer img { opacity: .1; }

js

 $(document).ready(function() { $(window).mousemove(function(pos) { $(".hole").css('left', (pos.pageX + 0) + 'px').css('top', (pos.pageY + 0) + 'px'); }); });

Tried to do differently so that the transparency changed exactly at the rectangle that follows the mouse, but nothing comes out

How to make the layer cut only within this rectangle, and the rest remained as it is?

It seems like this is done with the help of clip path + svg, but all attempts to realize it were in vain

    1 answer 1

    Well, in general, if you need to quickly, then something like this was implemented differently with the help of "zoom" images ... The bottom line: when hovering, a large (in this case, another) image is substituted into the floating block and the script processes which part to display. As an option.