透明な拡大鏡を作る方法は？

Question

いくつかの時間前に、マウスオーバーでクールな透明効果を使用するウェブサイトを見てきました。

透明な要素を作成する方法ウェブサイトの背景にカーソルを置くと、その領域の下にイメージが表示されますか？

カントは、この上の任意の情報を見つける、いくつかの戦略といくつかの例:)

Answer 1

OKを助けてください。

戦略：

• 場所背景
• 場所をいくつかのブロック
それ以上の場合、これは
• をDIV移動し、マウスの移動ならば、同じ背景
• とdivを作りますdivが移動し、背景をメインの背景の負の位置に移動します。

例：

$(function(){ 
 
    $(document).mousemove(function(e){ 
 
     var x = e.pageX; 
 
     var y = e.pageY; 
 

 
     var $t=$(".transfier"); 
 
     var newLeft =x-$t.width()/2; 
 
     var newTop= y-$t.height()/2; 
 
     $t.offset({ 
 
      top: newTop, 
 
      left: newLeft 
 
     }); 
 

 
     $t.css('background-position-x', 0 - x + $t.width()/2); 
 
     $t.css('background-position-y', 0 - y + $t.height()/2); 
 
    }); 
 
});

body { 
 
    background: url(https://wallpaperscraft.com/image/height_canyon_retina_81205_3840x2400.jpg); 
 
    background-position: 0px 0px; 
 
    background-repeat: no-repeat; 
 
    margin: 0px; 
 
} 
 

 
.transfier { 
 
    background: url(https://wallpaperscraft.com/image/height_canyon_retina_81205_3840x2400.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: 0px 0px; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid green; 
 
} 
 

 
.blockMyView { 
 
    background-color: white; 
 
    width: 75%; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    margin: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="transfier"> hoi </div> 
 
<div class="blockMyView"></div>