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

- Hover images on portfolio page as flat soild colour


GHG

Question

Site URL: https://falodu-demo.squarespace.com/work

Hi, I'm quite new to Squarespace and I have a question regarding the hover state on the images of a portfolio page in Squarespace 7.1 .
I'm currently working with this template: https://falodu-demo.squarespace.com/work and I was wondering if the hover state on the portfolio page (in this case work) can be a solid colour instead of the current 'faded' effect. I have looked everywhere on the design section but it seems it might have to be edited in the custom CSS.

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Oh wow, thank you thank you thank you so much, you absolutely solved it for me 🙂 thousands times thank you

Posted Images

2 answers to this question

Recommended Posts

  • 0
On 7/17/2020 at 9:36 PM, GHG said:

Site URL: https://falodu-demo.squarespace.com/work

Hi, I'm quite new to Squarespace and I have a question regarding the hover state on the images of a portfolio page in Squarespace 7.1 .
I'm currently working with this template: https://falodu-demo.squarespace.com/work and I was wondering if the hover state on the portfolio page (in this case work) can be a solid colour instead of the current 'faded' effect. I have looked everywhere on the design section but it seems it might have to be edited in the custom CSS.

Hi there

You can try inject this into Settings -> Custom Css

.grid-item .grid-image-inner-wrapper {
    position: relative;
}

.grid-item .grid-image-inner-wrapper:after {
    content: "";
    transition: opacity 0.5s;
    opacity: 0;
}

.grid-item:hover .grid-image-inner-wrapper:after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    background: #4CAF50;
    opacity: 0.7;
}

.no-touch .portfolio-grid-basic .grid-item:hover .grid-image {
    opacity: 1;
}

image.png.31625db84a62d9193edad2a115c9c641.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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