Question

我正在尝试模糊分别位于 flexbox 内的 3 个图像，但经过多次尝试后，我已经没有想法了。我试图将鼠标悬停在几乎每个 div 组合上，例如。 .categories .row1 .column1。 img:hover 使用 filter:blur()。任何这些都不起作用。

这是html代码：

<div class="categories">
    <div class="row1">
        <div class="column1">
            <img src="imgs/main-page/1.jpg" alt="Sesje zdjęciowe" style="width:100%">
        </div>
    </div>
    <div class="row2">
        <div class="column2">
            <img src="imgs/main-page/2.jpg" alt="Imprezy okolicznościowe" style="width:100%">
        </div>
    </div>
    <div class="row3">
        <div class="column3">
            <img src="imgs/main-page/3.jpg" alt="Klienci firmowi" style="width:100%">
        </div>
    </div>

这是一个 CSS 样式：

.categories {
   display: flex;
   height: 92vh;
}

.row1,
.row2,
.row3 {
   display: flex;
   height: 92vh;
   flex: 33.33%;
}

.column1 {
   flex: 33.33%;
   padding: 0px 3px 0px 0px;
}

.column2 {
   flex: 33.33%;
   padding: 0px 3px 0px 3px;
}

.column3 {
   flex: 33.33%;
   padding: 0px 0px 0px 3px;

}

.column1 img,
.column2 img,
.column3 img {
   height: 92vh;
}

Answer 1

您可以使用 filter 属性和 blur() 函数来创建模糊效果。

.categories {
  display: flex;
  height: 92vh;
}

.row1,
.row2,
.row3 {
  display: flex;
  height: 92vh;
  flex: 33.33%;
}

.column1 {
  flex: 33.33%;
  padding: 0px 3px 0px 0px;
}

.column2 {
  flex: 33.33%;
  padding: 0px 3px 0px 3px;
}

.column3 {
  flex: 33.33%;
  padding: 0px 0px 0px 3px;

}

.column1 img,
.column2 img,
.column3 img {
  height: 92vh;
}

img:hover {
  filter: blur(5px);
}

<div class="categories">
  <div class="row1">
    <div class="column1">
      <img src="https://i.picsum.photos/id/901/300/300.jpg?hmac=8-Zxyl2URaVHsQFbRJNKJ52yofy7UGOXSOPAa_bepfs" alt="Sesje zdjęciowe" style="width:100%">
    </div>
  </div>
  <div class="row2">
    <div class="column2">
      <img src="https://i.picsum.photos/id/914/300/300.jpg?hmac=ghkx68JWW6IEeaozmhAeyojhquNUUoGhH1ULrp0DwpE" alt="Imprezy okolicznościowe" style="width:100%">
    </div>
  </div>
  <div class="row3">
    <div class="column3">
      <img src="https://i.picsum.photos/id/256/300/300.jpg?hmac=NY-Kc_0T-LRop_egfEehw6sHGvf-vHsyL6CBFUJyaWQ" alt="Klienci firmowi" style="width:100%">
    </div>
  </div>

参考：filter CSS

悬停时图像模糊

1 个答案: