显示悬停图像的一部分

Reveal part of image on hover

本文关键字：一部分 图像 悬停 显示      更新时间：2023-09-26

我想尝试使用jquery或javascript实现交互效果。这个想法是有一个大的背景图像与不同的文字有关的业务。此背景图像将变暗，但鼠标悬停将像灯光一样显示鼠标光标周围的定义区域。

我不确定我是否在正确的轨道上，但我的总体想法是有一个背景图像与一个完全不透明的图像在它的不透明度设置为1。在鼠标悬停时，图像的不透明度将在鼠标悬停的定义半径内改变。

谁能告诉我如何才能实现这一目标?

多谢

看看这个小提琴

这背后的技巧是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>

希望能有所帮助。

一个更好的解决方案是在简单的CSS中完成它，不添加任何javascript，所以你可以只添加一个类，并对所有的图像进行处理，如:

.arrow:hover {
  opacity: 0.5;
}
相关文章：