Jump to content

Adding hover text and opaque white block on index collection gallery page

Recommended Posts

Site URL: https://www.kimsedgwick.co.za/

Looking to add hover text and an opaque white block on my index page - collection gallery.

As it stands, the text is currently over the image permanently, I want this to only appear when you hover over the image.

There is currently a faint opacity that appears when the image is hovered over, I want to decrease the opacity so It becomes a bit more white and you see less of the image.

See images attached for reference. My current site and what I am looking for, the images attached of what I am looking for has a solid white block and the text appears when hovered over but I would prefer mine to be less opaque than it is now but not solid . 

Thanks so much!

Screenshot 2020-04-06 at 17.39.21.png

Screenshot 2020-04-06 at 17.08.27.png

Screenshot 2020-04-06 at 17.09.19.png

Screenshot 2020-04-06 at 17.10.29.png

Screenshot 2020-04-06 at 17.12.58.png

Screenshot 2020-04-06 at 17.13.03.png

Screenshot 2020-04-06 at 17.41.36.png

Link to comment
  • Replies 19
  • Created
  • Last Reply
31 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


h2.Index-gallery-item-content-heading {
    visibility: hidden;
}
.Index-gallery-item-inner:hover h2.Index-gallery-item-content-heading {
    visibility: visible;
}

 

Thanks so much! This worked perfectly 🙂 You are a life saver

Link to comment
  • 2 weeks later...
1 hour ago, kimsedgwick said:

Is there perhaps any css code I could add to make these blocks more white and less opaque when I hover over them ? for text legibility reasons 🙂

Can you share link to page where you use blocks?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

 

Add to Home > Design > Custom CSS

/* Opacity */
.Index-gallery-item:hover .Index-gallery-item-image img {
    opacity: 10% !important;
}
/* background color */
.Index-gallery-item-image {
    background-color: white;
}
/* Overlay title */
.Index-gallery-item:hover .Index-gallery-item-content-heading {
    color: black !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 4/7/2020 at 5:24 AM, tuanphan said:

Add to Home > Design > Custom CSS


h2.Index-gallery-item-content-heading {
    visibility: hidden;
}
.Index-gallery-item-inner:hover h2.Index-gallery-item-content-heading {
    visibility: visible;
}

 

Hi Tuanphan,

Is there a similar code that can be used in 7.1 to accomplish this in a masonry gallery?

Thanks!

Link to comment
1 minute ago, barrysutton said:

Sure! https://pentagon-heptagon-rnn2.squarespace.com/work

password: california

I am trying to get a % color to appear on top of the image on rollover, as well as the description text. You might see a lot of jumbled code in the CSS as I have tried to patch a couple solutions together... a bit messy. 🙂

private site

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
2 hours ago, barrysutton said:

All works great! It seems to not allow linking the image to another page or gallery. Is there a way to allow linking images that have this rollover effect? 

Which code did you use? Use code in last comment.

and Have you inserted link on Images yet?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
3 minutes ago, barrysutton said:

Hi, I used the code from your post and it works great - I decided to not use links from the gallery. I really appreciate your work it has been terrific. Sent you a tip by PayPal, hope it helps! Thank you so much. 

Yes. I received. Thank you.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.