在WordPress Gutenberg图像块中为图像添加阴影

Question

CSS

.ts-learn-img figure:hover{
  -moz-box-shadow: inset 0 0 20px #000000;
  -webkit-box-shadow: inset 0 0 20px #000000;
  box-shadow: inset 0 0 20px #000000;
}

HTML：

<div class="wp-block-image ts-learn-img">
    <figure class="aligncenter size-medium is-resized">
        <a href="https">
            <img src="https" alt="" class="wp-image-4076" width="225" height="60" srcset="https">
        </a>
    </figure>
</div>

这是Wordpress（Gutenberg）中的标准图像块，具有为该块指定的类（ts-learn-img）。我试图在鼠标悬停在图像上方时在图像周围添加阴影。但是我得到了：

它只是在基线上添加阴影。现在，我尝试在CSS中使用

• .ts-learn-img figure a img:hover

这没什么区别。当鼠标悬停在图像上时，是否不可能有某种完整的阴影？

实际网页为here。

Answer 1

根据提供的评论，需要执行以下步骤：

1. 我必须去除图像周围多余的透明度，以使其仅是按钮。

2. 我必须对CSS样式进行如下更改：

.ts-learn-img figure {
    -moz-border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
    border-radius: 5px !important;
}

.ts-learn-img img {
  display: block;   
}

.ts-learn-img figure:hover{
  -moz-box-shadow: 0px 10px 20px #000;
  -webkit-box-shadow: 0px 10px 20px #000;
  box-shadow: 0px 10px 20px #000;

}

现在看起来好多了！