在 WordPress 古腾堡图像块中为图像添加阴影

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) 指定了 class。当鼠标悬停在图像上时，我试图在图像周围添加阴影。但我得到：

只是在基线上加了个阴影而已。现在，我尝试在 CSS:

中使用

.ts-learn-img figure a img:hover

这没什么区别。当鼠标悬停在图像上时，无法获得某种完整的阴影吗？

实际网页是here.

Answer 1

根据提供的意见，需要执行以下步骤：

我不得不去除图像周围多余的透明度，这样它就只是按钮了。
我不得不对 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;

}

现在看起来好多了！

在 WordPress 古腾堡图像块中为图像添加阴影

Adding a shadow to a image in WordPress Gutenberg Image block

css

image

wordpress-gutenberg