Question

我有一个图像和它周围的边框我想添加模糊悬停到图像但模糊覆盖图像和边框这里是代码

.ex{
    border-radius: 1000px;
    margin-right: 20px;
    border: 10px solid #fff;
    overflow: hidden
    -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;

    
}
.ex:hover{
    -webkit-filter: blur(5px);
    cursor:pointer;

<img src="img/13.jpg" alt="" width="200" height="200" class="ex">

Answer 1

您可以将图像包装在父元素中，然后将该元素包装为创建圆形边框，并将其设为正z-index，以便在应用filter时图像不会弹出。< / p>

.wrap {
  width: 200px;
  height: 200px;
  margin-right: 20px;
  position: relative;
}
.wrap {
  border-radius: 100%;
  overflow: hidden;
  z-index: 1;
}
.ex {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  max-width: 100%;
  display: block;
}
.wrap:hover {
  cursor: pointer;
}
.wrap:hover .ex {
  -webkit-filter: blur(5px);
}

<div class="wrap">
  <img src="https://scontent-dft4-1.cdninstagram.com/t51.2885-15/e35/17266233_1741922516118154_2155597975093510144_n.jpg" alt="" class="ex">
</div>

Answer 2

使用 div 包装您的图片，设置 div 尺寸和溢出：隐藏并存档。

.img-wrapper-for-blur {
        border-radius: 1000px;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }

从 .ex 样式中删除 border-radius ，并更改标记：

<div class="img-wrapper-for-blur">
    <img src="img/13.jpg" alt="" width="200" height="200" class="ex">
</div>

Answer 3

您可以将图像包裹在div中，为div提供一些填充和白色背景，然后将模糊留在图像上，而不是使用边框。

HTML

<div class="border">
  <img src="http://www.placehold.it/200x200" alt="" width="200" height="200" class="ex">
</div>

CSS

.ex {
  border-radius: 100%;
  overflow: hidden -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.ex:hover {
  -webkit-filter: blur(5px);
  cursor: pointer;
}

.border {
  border-radius: 100%;
  margin-right: 20px;
  background-color: #fff;
  display: inline-block;
  padding: 10px;
}

这是一个小提琴：https://jsfiddle.net/fm1hLy6h/

在不影响边框的情况下在图像上添加悬停

3 个答案: