0

I have a gallery of images and am trying to get a simple hover of an ID number/title for each image. I don't need a fancy transition or anything (it would be too hard for me to do tbh), just the title to appear when I mouse over it. My site is with Squarespace and they can't help as it's seen as advanced programming.

They have a custom css code section that you just paste the coding into. Don't think you put anything in the head section, just the css into this bit of the site. This is the code someone used to fade the images on rollover. (They said the main element is the first line).

.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;

     }

All I'm looking for is to change it to show image titles on hover instead of fading the image. When you upload each image you can name it, is there a way through CSS to tell it to pick up this info to appear on hover?

I know nothing about CSS coding but have tried for almost a fortnight to learn enough to do this myself, and I'm lost. Any help at all would be very much appreciated! Thanks

8
  • do you mean the title attribute? or you need a custom tool-tip? Apr 1, 2013 at 14:21
  • The important question is where is the title in the HTML code (element/attribute). You can't dynamically add text on hover via css, you can just show or hide existing elements in the HTML. We need this code to help you. Apr 1, 2013 at 14:22
  • I believe it's using the title attribute, I just don't know where to put it in the above coding so it would pick it up
    – DebUK626
    Apr 1, 2013 at 14:24
  • You could inspect the html code of your gallery and post it in your question. Apr 1, 2013 at 14:28
  • I don't think I have access to the html of the gallery as it's a drag and drop one within a template and they limit what you can access. They did give these instructions to make a simply hover gallery here: photogs.squarespace.com but they have since changed from Squarespace 5 to 6 and it no longer works. This is the exact thing I'm wanting though. I'm just wondering if it's any use?
    – DebUK626
    Apr 1, 2013 at 14:42

2 Answers 2

3

I see only one css only sollution for this. And this even works only if you would be able to put your title into the a element like this:

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

With css you then could grab the content from the title attribute on the link. Which works in most browsers exept IE7-. Unfortunately :after seems not to be supported on img elements.

.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;
}

This would look like that:

enter image description here

1
  • Yes that's what I'm after. I can't understand why Squarespace make it so awkward to be able to do this. Marcel you've been so helpful thank you so much. Will find out if I can put the title in the a element and then can see if it works. Thank you again for taking the time to help me. I appreciate it very much.
    – DebUK626
    Apr 1, 2013 at 16:22
0

I'm not familiar with Squarespace, but any kind of title/name you give the image is saved in some kind of database and you would need to retrieve that name somehow in order to display it, with or without the help of css. Also, what you want is normally achieved by putting any desired image title into the alt or title attributs of the img tag, i.e.: <img src="example.jpg" alt="Here is hover title" title="Here is hover title" /> Different browsers would use on or the other.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.