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

Bedford: Text and Color Overlay on Hover/Rollover of Gallery Grid Images


bethanyjoy

Question

Hi! I'm trying to add a color overlay and text overlay on hover/rollover of the gallery grid image links on the homepage of my Bedford template portfolio site. I am familiar with custom CSS, and have been using it on my portfolio template, however I can't figure out how to make this happen.

Here is a link to my site: www.scoutstud.io

Here is an example of the hover effect I want to achieve: http://danielfuhrerdesign.com

Any advice would be greatly appreciated!!

Bethany

Edited by emca
Link to comment
  • Answers 44
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0

Hey, this is great @HeartandDash.

One question though, I've tried about a million things and can't seem to have the hover opacity be a smooth transition like it is with the gallery code you posted. I have tried using transitions on all the classes but am only able to get the opacity to ease out, not in. Any thoughts?

Thanks!

Link to comment
  • 0

@HeartAndDash this is brilliant - I have been looking all over for exactly this effect.

I have 2 problems/questions if you're still about!?

1: Only the top third of each of my thumbnails now appears clickable and not sure how to get around this? http://www.gilesmaunsell.com/producer

2: How can I make this apply to ONLY the grid gallery block on my "producer" page, and not in the mini gallery at the bottom of my individual video pages. Example: http://www.gilesmaunsell.com/tempo

Many thanks in advance if you do get to this.

Giles

Link to comment
  • 0

@HeartAndDash this is brilliant - I have been looking all over for exactly this effect.

I have 2 problems/questions if you're still about!?

1: Only the top third of each of my thumbnails now appears clickable and not sure how to get around this? http://www.gilesmaunsell.com/producer

2: How can I make this apply to ONLY the grid gallery block on my "producer" page, and not in the mini gallery at the bottom of my individual video pages. Example: http://www.gilesmaunsell.com/tempo

Many thanks in advance if you do get to this.

Giles

Link to comment
  • 0

Hi Heart & Dash, if it's not too much to ask, are you still using the same code as above?I used the exact code on my site (Bedford) and got the words popping up just a month ago, but today when I looked, the titles all disappeared and now I can't seem to get them to show up again.All I did was point the address from hostgator.my website is: easterncorpus.com

Link to comment
  • 0

I've developed a commercial plugin that adds grid gallery block titles in front of the image with smooth hover effects. You can add a background color as well.

So if a result like the image below is what you're after, check out the plugin here.

alt text

– Petri / Vox Pop

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 0

I've developed a commercial plugin that adds grid gallery block titles in front of the image with smooth hover effects. You can add a background color as well.

So if a result like the image below is what you're after, check out the plugin here.

alt text

– Petri / Vox Pop

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 0

@heartandash, I'm having the same issue as @flurryjung and @morena. The fade works perfectly on roll-over, but the titles are gone! Any ideas for what's changed and how we can fix it? I saw that your site is still working. My site is blackhouseflowers.com. The nine images on the home page should all have text show up on rollover. Thank you in advance!

Link to comment
  • 0

Hi @HeartAndDash -- thank you so much for sharing this code. Two questions for you: 1. Is there a way to change the overlay color to black instead of white? 2. For mobile - is there a way to have the title show up without the hover or someway of showing the titles below (only for mobile?)Thank you so much in advance!

Link to comment
Guest
This topic is now closed to further replies.

×
×
  • Create New...