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

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;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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
6 minutes ago, barrysutton said:

Hi Tuanphan,

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

Thanks!

Can you share link to gallery on your site?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
6 minutes ago, barrysutton said:

sorry password: california

I answered this problem to 2 members in another questions, I tried to find but did not see. I will check again tomorrow.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
8 hours ago, barrysutton said:

thank you very much. can I make a donation for your work?

Morning. I will checking again this morning

You can use this PayPal.

Edited by tuanphan

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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