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

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?

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

Code + Tonic — We solve Squarespace Problems

The best of the best 💕 
Custom code, strategy, analytics, design and CSS edits. 

Get in touch via codeandtonic.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

Code + Tonic — We solve Squarespace Problems

The best of the best 💕 
Custom code, strategy, analytics, design and CSS edits. 

Get in touch via codeandtonic.com

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

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