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

问题描述

我有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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript webkit