模糊图像并在图像上显示文本 (css)

Question

我有 2 张图片，将鼠标悬停在上面时我想模糊处理并在上面显示文字。但是，目前看来图像仅在光标位于其边缘时才会模糊，而当光标位于中间时则不会。我希望图像模糊并显示其文本。有人对我可能出错的地方有建议吗？

此外，如果有任何关于如何更好地将文本 放置在 图像中的建议，那就太好了。我认为我的“位置”或“显示”已关闭。谢谢！

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<style media="screen">
  .study-icons {
    width: 300px;
    padding-left: 25px;
    padding-right: 25px;
    cursor: pointer;
    /* border: 2px solid blue; */
  }

  .study-icons:hover {
    -webkit-filter: blur(10px);
    filter: blur(10px);
  }

  .study-wrapper {
    display: inline-block;
    text-align: center;
    padding-bottom: 0px;
  }

  .img__wrap {
    position: relative;
    height: 255px;
    width: 300px;
  }

  .img__description_layer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10;
    right: 0;
    /* background: rgba(36, 62, 206, 0.6); */
    color: black;
    visibility: hidden;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* transition effect. not necessary */
    transition: opacity .2s, visibility .2s;
  }

  .img__wrap:hover .img__description_layer {
    visibility: visible;
    opacity: 1;
  }

  .img__description {
    transition: .2s;
    transform: translateY(1em);
  }

  .img__wrap:hover .img__description {
    transform: translateY(0);
  }
</style>

<body>
  <div class="img__wrap">
    <div id="image1">
      <img class="img__img study-icons" src="assets/studies/image1.png">
      <div class="img__description_layer">
        <p class="img__description">Sample text here about image1?</p>
      </div>
    </div>
  </div>
  <div class="img__wrap">
    <div id="image2">
      <img class="img__img study-icons" src="assets/studies/image2.png">
      <div class="img__description_layer">
        <p class="img__description">Sample text here about image2</p>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

要解决此问题，请将悬停指定在 img__wrap

上

为了确保您的文本居中，您必须将 .ing__wrap 定位为相对位置，然后将 .img__description_layer 设置为如下所示：

Position:absolute;
Top:50%;
Left:50%;
Transform:translate(-50%,-50%);

模糊图像并在图像上显示文本 (css)

Blur image and show text over image (css)

html

javascript

css

webkit