0

我有一个图片库，并试图为每张图片简单地悬停一个 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 编码一无所知，但已经尝试了将近两周的时间来学习足够的知识来自己做这件事，但我迷路了。任何帮助都将非常感激！谢谢

4

2 回答 2

3

我只看到一个 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;
}

这看起来像这样：

在此处输入图像描述

于 2013-04-01T16:12:22.003 回答
0

我不熟悉 Squarespace，但是您为图像提供的任何类型的标题/名称都保存在某种数据库中，您需要以某种方式检索该名称才能显示它，无论是否有 css 的帮助。此外，您想要的通常是通过将任何所需的图像标题放入标签的alt或title属性中来实现img，即：<img src="example.jpg" alt="Here is hover title" title="Here is hover title" />不同的浏览器将使用 on 或其他。

于 2013-04-01T14:24:07.717 回答