Jump to content

Image description on hover Gallery Block Grid

Recommended Posts

Site URL: https://bulldog-green-chzy.squarespace.com/

Site URL https://bulldog-green-chzy.squarespace.com/

Password: Dpc35!

I'm trying to add image descriptions, that appear in the centre of a "slightly" greyed out hover. I've been able to create the hover, however the image description appears right at the top of the hover (and therefore the image). I also want to be able to click on the image, to open the Vimeo video and play etc.

I set it up by starting with a Blank page, added a gallery block - 'grid' - and "used existing Gallery" that I had put all the videos in (stored in my "Unlinked" area). (using Squarespace 7.0).

I've attached a screen grab of what the image looks like when you hover .. 

This is the code I've been using:

.sqs-gallery.sqs-gallery-design-grid .slide 
.margin-wrapper .image-slide-title {
 position: absolute;
 bottom: 0;  
 width: 100%;
 height: 0%;
 color: white;
 background-color: black;
 opacity: 0;
 transition: all .25s hover;
}
.sqs-gallery.sqs-gallery-design-grid .slide 
.margin-wrapper:hover .image-slide-title {
 height: 100%;
 opacity: .65;
}
 
 

Screen Shot 2020-09-24 at 1.28.22 pm.png

Link to comment
  • Replies 6
  • Views 669
  • Created
  • Last Reply

Top Posters In This Topic

Hi,

Sorry to confuse .. the screen grab you have is the Home page (the text position when I hover is fine) .. I am referring to the linked pages where you can see a gallery block of thumbnail images (linked to Vimeo videos).

I have been able to centre the titles over the thumbnails when I hover (yay!) however discovered another "glitch" ... when you hover near the text, the opacity becomes 0 and the hover "hand" changes to a curser and therefore you cannot activate play the linked video?

I've taken two screenshots to explain (on my "Tabletop/Food" page - the 1st shows where I hover near the text, and the curser changes to an "arrow" and 0 opacity .. the 2nd shows the setting I want all over the thumbnail when I hover, the curser as a hand and .75 opacity, as well as being able to play the video..

IMG_2827.JPG

IMG_2826.JPG

Link to comment
  • 2 years later...
On 2/4/2023 at 2:25 AM, JKDwebsite said:

How did you get it centered? I have it centered but now the transparency is only half over the image. 

Can you share link to page where you use gallery? We can tweak the code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.