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

@HeartandDash hi Heart, I'm also having trouble changing the hover background from dark gray/black. Doesn't seem to be showing color #fddccee like your site. Can you advise? Thanks!

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!

@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

@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

Edit: I have got the style to only apply to the one block now, so just question 1 remains - how to get the whole thumbnail clickable again?

as above i see. @polaroidbug did you get around the top half issue?

see here: gilesmaunsell.com/producer - same problem

@kriscave Thanks! This did work for me, but now it's changing the opacity of the background color AND the caption. Any ideas?

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

Hi @heartanddash I'm having the same problem as @flurryjung - the hover effect is working but the text is not appearing. I've checked your site and it still seems to be working on yours. Is there a new code by any chance?

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.

– Petri / Vox Pop

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.

– Petri / Vox Pop

Any idea how I could reverse this transition? I want the overlay with text visible on page load and when the user hovers the image reverts to it's original state with no text.

Thank you! I spent hours trying to figure this out, glad I found your post! Huge!

Hi there - this is working pretty well for the Bryant template, but the title is spanning the padding between images rather than wrapping the text within the image block. Any suggestions/modifications?

Thanks!

@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!

Someone on another thread figured it out: Squarespace changed something so that you now have to explicitly set the "show title" option in the gallery block.

Hi Heart&Dash, I am trying to do the same thing on the Brine template, but it doesn't work when I copy/paste your code, I am guessing the .sqs are not the same in Brine. Do you have an Idea how I can achieve this? Thanks!

Hi! Thanks for this fix and to @heartanddash for the code. I'm wondering if anyone has a solution to make the text clickable as well. Would really appreciate the help!

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!