Dasu Posted September 24, 2020 Share Posted September 24, 2020 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; } Link to comment
tuanphan Posted September 25, 2020 Share Posted September 25, 2020 It seems you solved. Do you still need help on this? 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
Dasu Posted September 25, 2020 Author Share Posted September 25, 2020 Hello, Unfortunately I haven't solved .. how do I centre the text (image description) in the middle of the image, not at the top of the image when I hover? And also how to make the text size larger? Many thanks!! Link to comment
tuanphan Posted September 27, 2020 Share Posted September 27, 2020 Hi. I see center here. 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
Dasu Posted September 27, 2020 Author Share Posted September 27, 2020 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.. Link to comment
JKDwebsite Posted February 3, 2023 Share Posted February 3, 2023 How did you get it centered? I have it centered but now the transparency is only half over the image. Link to comment
tuanphan Posted February 8, 2023 Share Posted February 8, 2023 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment