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

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

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

Share this post


Link to post

Recommended Posts

  • 0

**I looked at the draft saying $5331 , I didn’t believe that…my… father in law realey receiving money in there spare time online. . there great aunt had bean doing this 4 only about fifteen months and a short time ago repayed the loans on their cottage and bought a great new Bugatti Veyron . visit this site …

.>>>.>>>
=============================**

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 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!

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0

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

Edited by acervo
Initial Revision

Share this post


Link to post
  • 0
Guest

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

Share this post


Link to post
  • 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?

Share this post


Link to post
  • 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


Vox Pop - Pro Squarespace designers & Developers

We're the best of the best 💕
Custom code, strategy, analytics, design and CSS edits. 

Get in touch via voxpopagency.com

Share this post


Link to post
  • 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


Vox Pop - Pro Squarespace designers & Developers

We're the best of the best 💕
Custom code, strategy, analytics, design and CSS edits. 

Get in touch via voxpopagency.com

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 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!

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 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!

Share this post


Link to post
  • 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!

Share this post


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

×
×
  • Create New...