css - 在画廊图像缩略图 CSS 上悬停时显示标题

Question

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

他们有一个自定义的 CSS 代码部分，您只需将代码粘贴到其中即可。不要认为您在 head 部分放了任何东西，只是将 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 only 解决方案。这甚至只有在您能够像这样将标题放入 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;
}

这看起来像这样: