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 5
  • 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...

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.