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

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 时图像就不会弹出.

.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 尺寸和 overflow:hidden 然后你存档。

.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;
}

这是一个fiddle：https://jsfiddle.net/fm1hLy6h/

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

adding a hover on image without affecting the border

css

border

hover