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

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!

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

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

On 4/7/2020 at 11:56 AM, kimsedgwick said:

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

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 🙂

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?

3 minutes ago, tuanphan said:

Can you share link to page where you use blocks?

Hi there, it is kimsedgwick.co.za 🙂

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

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!

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?

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

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

sorry password: california

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.

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

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.

8 hours ago, barrysutton said:

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

try this code

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? 

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?

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. 

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.