Jump to content

change text color on hover and add more padding around text so it is not touching the edges of a summary block grid

Go to solution Solved by KwameAndCo,

Recommended Posts

https://gerbil-wolf-j99l.squarespace.com/members, if there is a password it would be 123

.sqs-gallery-design-autogrid .summary-item:hover {
    background-color: #BDDC02 !important;
    box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important;
    opacity: 1;
    transition: ease-in-out .3s;
}

this is the code I have for the color change on hover is there a way to add padding so that the text is not touching the edges? Also is there a way to trigger a change in text color to dark blue HEX #1a3868 when the green background is showing?

 

thanks! 

Link to comment
  • Replies 3
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution
25 minutes ago, LindsEli said:

this is the code I have for the color change on hover is there a way to add padding so that the text is not touching the edges? Also is there a way to trigger a change in text color to dark blue HEX #1a3868 when the green background is showing?

 

Use

.sqs-gallery-design-autogrid .summary-content {
  padding: YOURPADDING;
}
.summary-title, .summary-excerpt, .summary-metadata--primary, .summary-metadata--secondary {
  transition: all ease-in-out .3s;
}
.sqs-gallery-design-autogrid .summary-item:hover {
  background-color: #BDDC02 !important;
  box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important;
  opacity: 1;  
  transition: all ease-in-out .3s;

  .summary-title, .summary-excerpt, .summary-metadata--primary, .summary-metadata--secondary{
    color:#1a3868;
  }
}

And you should be golden.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
2 hours ago, KwameAndCo said:

Use

.sqs-gallery-design-autogrid .summary-content {
  padding: YOURPADDING;
}
.summary-title, .summary-excerpt, .summary-metadata--primary, .summary-metadata--secondary {
  transition: all ease-in-out .3s;
}
.sqs-gallery-design-autogrid .summary-item:hover {
  background-color: #BDDC02 !important;
  box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important;
  opacity: 1;  
  transition: all ease-in-out .3s;

  .summary-title, .summary-excerpt, .summary-metadata--primary, .summary-metadata--secondary{
    color:#1a3868;
  }
}

And you should be golden.

perfect thank you so much!

 

Link to comment
23 hours ago, LindsEli said:

perfect thank you so much!

 

Happy to have helped.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

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.