jquery - 如何在鼠标悬停时绘制像圆圈一样的镜头

Question

我试图在鼠标悬停时显示一个像圆圈一样的镜头。我为它做了一些编码，但仍然没有达到完美的结果。 任何人都知道如何做到这一点然后让我知道？ 这是我的代码 //html

<div class="thumbnails">
    <div class="thumbnail">
    <img src="http://www.niams.nih.gov/health_info/Sprains_Strains/images/Fig3_Thumb.gif" />
</div>
<div class="thumbnail">
    <img src="http://www.niams.nih.gov/health_info/Sprains_Strains/images/Fig3_Thumb.gif" />
</div>
<div class="thumbnail">
    <img src="http://www.niams.nih.gov/health_info/Sprains_Strains/images/Fig3_Thumb.gif" />
</div>
</div>

//CSS

.thumbnails {
    padding: 35px;
}
.thumbnail {
    float:left;
    position:relative;
    width: 70px;
    margin-right: 10px;
}
.thumbnail img{
    /* ... */
    width:70px;
    height:50px;
}    

.thumbnail:hover img {
    position:relative;
    top:-25px;
    left:-35px;
    width:140px;
    height:140px;
    display:block;
    z-index:999;
    border-radius:75px;
    border:5px solid gray;
}

这是我的 Fiddle Code

Answer 1

您必须用渐变或图像覆盖它。有关工作示例，请参阅此 fiddle :http://jsfiddle.net/V4YaQ/119/

基本上我包裹了图像并添加了一个叠加层:

<div class="thumbnail">
   <div class="image-container">
      <div class="overlay">&nbsp;</div>
      <img src="http://cdn1.bigcommerce.com/server4800/10d13/products/1134/images/4290/pw72_1__15735.1346792984.320.320.jpg" />
   </div>          
</div>

然后在 CSS 上我这样做了:

.thumbnail:hover .image-container {
  position:relative;    
  top:-25px;
  left:-35px;
  width:140px;
  height:140px;    
  z-index:999;    
  border-radius:75px;
  border:1px solid white;  
  overflow: hidden;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.thumbnail:hover img {
  position:relative;
  width:140px;
  height:140px;
  display:block;
}

.thumbnail .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(at 25% 25%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.0) 35%, rgba(0, 0, 0, 0.5) 100%);
  display: none;
}

.thumbnail:hover .overlay {
  display: block;  
  z-index: 1000;
}

如您所见，我还更改了边框并添加了阴影以达到效果。