Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
kimsedgwick

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

Question

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

Share this post


Link to post

19 answers to this question

Recommended Posts

  • 0
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

Share this post


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

Share this post


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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

 

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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

Share this post


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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

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? 

Share this post


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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

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. 

Share this post


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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...