在 Blogger 中使用悬停文本在一行上创建两个图像

Posted 2023-03-17

【中文标题】在 Blogger 中使用悬停文本在一行上创建两个图像

【英文标题】：Create two image on a line with hover text in Blgger

【发布时间】：2014-06-11 01:36:04

【问题描述】：

我正在尝试使用 blogger.com 为我的博客创建一个图片页面。关键是我希望能够在将鼠标悬停在照片上时让文字出现在照片上。我想出了如何通过使用this post 中的代码来做到这一点。 （我无法以正确的格式将它放在这篇文章中）

但是，我不太擅长 html，而我真正想做的是将 两张照片放在同一行 以达到这种效果。有谁知道如何做到这一点？如果没有，有谁知道如何将图像至少放在页面中心。

（如果这是不可能的，我怎样才能在同一行获得两个带有标题的图像。我可以在同一行获得两个图像，但是当我添加一个标题时，它会强制第二个图片到一个新行。）

如果您有一种将悬停效果添加到图像的更简单方法，请告诉我，因为理想情况下我不想为每个图像添加这么多代码图像，因为我计划有很多图像

【参考方案1】：

这肯定会使 2 张图片彼此相邻。检查此DEMO。它具有悬停功能以及图像所需的标题。

<table>
<tr><td>
<div class="imgWrap">
  <img src="sample1.jpg" />
  <p class="imgDescription">First Image text.</p>
  <span style="font-size: small;">Caption text 1</span>
</div>
    </td>
    <td><div class="imgWrap">
  <img src="sample2.jpg" />
  <p class="imgDescription">Second image text</p>
  <span style="font-size: small;">Caption text 2</span>
</div></td>
</tr>
    </table>