Показать часть изображения при зависании

Question

Я хочу попробовать и реализовать интерактивный эффект, используя jquery или javascript. Идея состоит в том, чтобы иметь большое фоновое изображение с разными словами о бизнесе. Это фоновое изображение будет затемнено, но наведение мыши будет действовать как свет, чтобы выявить определенную область вокруг курсора мыши.

Я не уверен, что я нахожусь на правильном пути, но моя общая идея состоит в том, чтобы иметь фоновое изображение с полностью непрозрачным изображением перед ним с его непрозрачностью, установленной на 1. На mousehover непрозрачность изображения будет изменяться в пределах определенного радиуса мыши.

Может ли кто-нибудь сказать мне, как хороший способ достичь этого?

Большое спасибо

Answer 1

Отъезд fiddle.

Хитрость за ней rem.

Это фрагмент.

$(document).ready(function() { 
 
    var $magic = $(".magic"), 
 
    magicWHalf = $magic.width()/2; 
 
    $(document).on("mousemove", function(e) { 
 
    $magic.css({ 
 
     "left": e.pageX - magicWHalf, 
 
     "top": e.pageY - magicWHalf 
 
    }); 
 
    }); 
 
});

html, 
 
body { 
 
    font-size: 62.5%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.scene { 
 
    position: relative; 
 
    height: 100%; 
 
    background: #1d1f20; 
 
    padding: 20rem; 
 
    text-align: center; 
 
} 
 
h1 { 
 
    position: relative; 
 
    font-size: 8rem; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    z-index: 10; 
 
} 
 
.magic { 
 
    z-index: 5; 
 
    position: absolute; 
 
    top: calc(50% - 10rem); 
 
    left: calc(50% - 10rem); 
 
    width: 20rem; 
 
    height: 20rem; 
 
    background: url("http://beautifulphotos.atguru.in/beautifulimages/30-beautiful-peacocks/beautiful-peacocks-11.jpg") 50% 50% no-repeat fixed; 
 
    background-size: cover; 
 
    border-radius: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="scene"> 
 
    <h1>TEXT HERE</h1> 
 
    <div class="magic"></div> 
 
</div>

Надеется, что это помогает.

Answer 2

приятнее решением было бы сделать это в простой CSS, без добавления каких-либо JavaScript, поэтому вы можете просто добавить класс и сделать это со всеми изображениями, что-то вроде:

.arrow:hover { 
    opacity: 0.5; 
}