Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
willhowe

How do add basic overlay/hover on Gallery block items on 7.1 (currently bare)

Question

Site URL: https://mwejps3lrkma.squarespace.com

Currently on 7.1 the Gallery blocks with links have no hover/interaction on them, so it's quite hard for users to tell they're clickable links. (example: https://mwejps3lrkma.squarespace.com)

How easy is it to customise it so that we get a basic hover effect? Even a token 10% opacity on hover? Or even better display the 'Alt' text in the centre to match the styling on the Portfolio gallery blocks (example: https://mwejps3lrkma.squarespace.com/)

I thought something like the below would be a quick fix but it doesn't seem to work;

.gallery-grid-item img:hover {
  opacity: 0.9 !important;
}

 

Share this post


Link to post

20 answers to this question

Recommended Posts

  • 1

Hey all.  if you have a gallery block in 7.1, I have managed to make the caption overlay the image quite successfully, whilst having hover effects applied aswell.  The easiest way to do this is add HTML text to the caption itself.  This allows you to have much more control over the text and font without the need to apply 100 lines of CSS.  

Images attached are of my new website.  You can see the text overlay and on the second image, you can see the hover effect.  This was all done using simple CSS.  If you want text to appear and rise perhaps on hover, that once again is extremely simple by using simple CSS to place the text below the images & set opacity to 0.  Then on image hover, you set opacity to 100 & have a transition timer to ensure it looks seamless with the rise time.  

If you need CSS help, id be happy to send across.

 

Goodluck and hope this helps. 

Screenshot 2020-08-06 at 10.25.21.png

Screenshot 2020-08-06 at 10.25.10.png

Share this post


Link to post
  • 0
figure.gallery-grid-item.has-clickthrough:hover {
    opacity: 0.5;
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
1 hour ago, Kwamzilla said:

Any idea how to add the caption/alt text?

OR change color of the overlay?

Can you share link to gallery page?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
4 minutes ago, Kwamzilla said:

Sure

https://ruby-recorder-wp9w.squarespace.com/?password=letsconnect

There are a few galleries on the page atm, since I'm having a fiddle, but it's the 3 videos under the H2 "Videos" that I'm focused on atm.

Thanks

https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Thanks bud... Still gotta figure out how to make the caption & overlay fade in on hover but this is a big step forward.

Share this post


Link to post
  • 0
29 minutes ago, Kwamzilla said:

Thanks bud... Still gotta figure out how to make the caption & overlay fade in on hover but this is a big step forward.

Add caption first, then we can check the code to create overlay effect


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)

@tuanphan

Done. I've managed to get it to cover the image so now I'm figuring out:

  1. How to center text vertically.
  2. How to now set this to only appear on hover.

Any advice or tips is greatly appreciated.

 

EDIT: Have taken it off, for the moment, as it's driving me crazy and I may have to just use Image blocks with rollover gradient on desktop and a carousel on mobile as a work around for now. Thanks for your help. If you get time and think you can help some more, would really appreciate giving it another go.

Edited by Kwamzilla

Share this post


Link to post
  • 0
On 5/8/2020 at 10:01 PM, Kwamzilla said:

@tuanphan

Done. I've managed to get it to cover the image so now I'm figuring out:

  1. How to center text vertically.
  2. How to now set this to only appear on hover.

Any advice or tips is greatly appreciated.

 

EDIT: Have taken it off, for the moment, as it's driving me crazy and I may have to just use Image blocks with rollover gradient on desktop and a carousel on mobile as a work around for now. Thanks for your help. If you get time and think you can help some more, would really appreciate giving it another go.

Have you solved yet?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Sadly not. The client also changed their mind and so now I'm not trying as earnestly to solve it as the immediate incentive is gone. It's still something on my radar so will post if/when I do.

Share this post


Link to post
  • 0
6 hours ago, Charlie1 said:

@tuanphan

Can we get the CSS to do this on a regular image block in 7.1? 

Yes. You can. Can you share link to page where you inserted image blocks?

There has some similar effect: https://beaverhero.com/squarespace-templates-image-boxes/


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
On 2/1/2020 at 7:41 AM, tuanphan said:

figure.gallery-grid-item.has-clickthrough:hover {
    opacity: 0.5;
}

 

Hi I tried using this to create a hover state for my gallery images, but nothing is happening. Thoughts on why it's not working? Thanks!
https://hypersphere-seal-aag2.squarespace.com/

Share this post


Link to post
  • 0
1 hour ago, alstrauss said:

I tried using this to create a hover state for my gallery images, but nothing is happening. Thoughts on why it's not working?

Please set up a site-wide password so we can take a look at your site.


Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Share this post


Link to post
  • 0

@John1490 Would you be able to go through how you achieved this? Afraid i'm new to all this but this is exactly what i'm trying to achieve. Thanks.

Edited by JasonNash

Share this post


Link to post
  • 0
On 8/6/2020 at 10:28 AM, John1490 said:

Hey all.  if you have a gallery block in 7.1, I have managed to make the caption overlay the image quite successfully, whilst having hover effects applied aswell.  The easiest way to do this is add HTML text to the caption itself.  This allows you to have much more control over the text and font without the need to apply 100 lines of CSS.  

Images attached are of my new website.  You can see the text overlay and on the second image, you can see the hover effect.  This was all done using simple CSS.  If you want text to appear and rise perhaps on hover, that once again is extremely simple by using simple CSS to place the text below the images & set opacity to 0.  Then on image hover, you set opacity to 100 & have a transition timer to ensure it looks seamless with the rise time.  

If you need CSS help, id be happy to send across.

 

Goodluck and hope this helps. 

Screenshot 2020-08-06 at 10.25.21.png

Screenshot 2020-08-06 at 10.25.10.png

Hi - Have you got a step-by-step how this was achieved? Its exactly what i'm hoping to achieve. many thanks

Share this post


Link to post
  • 0
On 9/13/2020 at 4:09 PM, JasonNash said:

Hi - Have you got a step-by-step how this was achieved? Its exactly what i'm hoping to achieve. many thanks

Have you solved yet?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...