图像大小和鼠标悬停

Question

在此页面中 http://demos.roxiwd.com/index.php/ar/kgar

如何正常显示下一行图像 以及一旦鼠标悬停在图像上的任何点而不是单词区域时，如何显示单词。

Answer 1

img:hover .words {
 display: block;
}

Answer 2

最大的问题是图像容器上的列宽度是动态的，并且高度是固定的（background-size设置为100% 100%）。这导致图像变形。您说要在悬停时更改它。为此，您首先需要重置此容器的高度：

.uc_animated_border_banner:hover .uc_animated_border_bg {height: auto!important;}

接下来，您应该使用padding trick来将（现在是动态的）高度设置为等于纵横比。图片的长宽比为450px / 350px = 1.29。这等于129％底部填充。将其更正为实际上占据框内的Verticale空间（h2，高度为30px）的元素的行高，最后以129% - 30px为填充底部。将其拆分为顶部和底部的均等填充，最后在h2元素的顶部和底部均以64.5% - 15px填充为结尾。这将导致一个框的精确长宽比为1.29（只要h2可以放置在一行上）。

.uc_animated_border_banner:hover .uc_animated_border_banner .uc_content_box h2 {
  padding-top: calc(64.5% - 15px)!important;
  padding-bottom: calc(64.5% - 15px)!important;
}

提示：在h2上使用position: absolute可以得到没有15px / 30px和单行约束的解决方案。

---

尽管这可行，但我还是选择了一个更简单的解决方案。在第214行找到内联CSS语句：

.uc_animated_border_bg {background-size: 100% 100%!important;}

...并替换为：

.uc_animated_border_bg {background-size: cover!important;}

我认为结果看起来更好，解决方案也更简单。此替代解决方案适用于任何图像（与纵横比无关）。唯一的缺点是，未知数量的图像不可见/已被裁剪。