css - 在 WordPress 古腾堡图像 block 中为图像添加阴影

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) 中的标准图像 block ，具有为该 block 指定的类 (ts-learn-img)。当鼠标悬停在图像上时，我试图在图像周围添加阴影。但我得到:

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

• .ts-learn-img 图 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;

}

现在看起来好多了!