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

Opaque Portfolio Grid Overlay on Hover


annaleigh275

Question

Site URL: https://www.annawasson.com/

As you can see on my site, when you hover over each portfolio image on the portfolio grid, there is a transparent black overlay with the caption. I have been tinkering with custom CSS to make the overlay a solid color (light blue) with the caption when you hover over it, but I can't seem to make the opacity completely opaque on hover. Let me know if this is possible.

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

Hi, I have the same question but when I tried this it does not change the opacity, only the color. Adding "opacity: 1" seems to change the opacity for the entire block of images at once, not just the one I'm hovering over...any ideas?

Link to post
  • 0
On 3/1/2021 at 10:44 AM, sgreenspan24 said:

Hi, I have the same question but when I tried this it does not change the opacity, only the color. Adding "opacity: 1" seems to change the opacity for the entire block of images at once, not just the one I'm hovering over...any ideas?

Add to Design > Custom CSS

.portfolio-grid-overlay .portfolio-overlay {
    background-color: rgba(255,255,255,0.9) !important;
}

0.9 is opacity (0 >> 1)

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