悬停在图库图像缩略图CSS上显示标题

Question

我有一个图片库，我正试图为每张图片简单地悬停一个ID号/标题。我不需要花哨的过渡或任何东西（这对我来说太难了），只是当我将鼠标放在它上面时出现的标题。我的网站使用的是Squarespace，它们无法提供帮助，因为它被视为高级编程。

他们有一个自定义的css代码部分，您只需将编码粘贴到其中即可。不要以为你把任何东西放在头部，只是把css放到网站的这个位置。这是有人用来在翻转时淡化图像的代码。 （他们说主要元素是第一行）。

.sqs-gallery-design-grid-slide:hover {
 -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
-moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
-ms-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
 -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);  
     opacity: 0;

     }

我正在寻找的是将其更改为在悬停时显示图像标题而不是淡化图像。当您上传每个图像时，您可以为其命名，是否有一种方法可以通过CSS告诉它在悬停时显示此信息？

我知道没有什么关于CSS编码，但已经尝试了将近两周的时间来学习自己这么做，而且我迷路了。任何帮助都将非常感谢！ 感谢

Answer 1

我只看到一种css溶解剂。只有当你能够将你的标题放入a这样的元素时，这才有效：

<a title="Picture 1 TEST" rel="lightbox" href="http://photogs.squarespace.com/simple/gallery-1/2706700">

使用css，您可以从链接上的title属性中获取内容。在大多数浏览器中都适用于IE7-。很遗憾，:after元素似乎不支持img。

.thumbnail-wrapper a {
  position: relative;
}
.thumbnail-wrapper a:hover:after {
  content: attr(title);
  color: #000;
  padding-left: 5px;
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
  opacity:0.5;
  min-height: 30px;
  background: #FFF;
  bottom: 0px;
  left: 0px;
}

这看起来像那样：

Answer 2

我不熟悉Squarespace，但是你给图像的任何类型的标题/名称都保存在某种数据库中，你需要以某种方式检索该名称以便显示它，无论有没有帮助CSS。此外，您想要的通常是通过将任何所需的图像标题放入alt标记的title或img属性，即：<img src="example.jpg" alt="Here is hover title" title="Here is hover title" />不同的浏览器将使用或另一个。