如何使用CSS在图像中实现缩略图效果

Question

我想在Image中实现缩略图效果，通过将其应用到div中来实现缩略图效果，如

<div class="fui-container fui-image-thumb">
  <a href="#">      
    <span>Dhabri Kunda; This picture is for Dhabri Kunda</span>
  </a>
</div>

您可以在codepen

中看到这一点

现在，我希望将此效果直接转换为img标记，如

<img class="fui-Morph" src="https://1.bp.blogspot.com/-dpUhA-kOBgs/UBEE0NyP_yI/AAAAAAAAAEE/_Q3hGLXkotQ/s640/Dhabri+Kunda.jpg" style="width:30%" alt="portrait">
  <h4>Image Morph on Hover</h4>

我尝试过：

当我将标记替换为<img>标记时，它无效。相反，我没有找到问题。当我将标签更改为<img>标签时，我也删除了 来自.fui-image-thumb部分的网址部分。

请帮助我无法理解我做错了什么。