Jump to content

Price and Title Hover

Go to solution Solved by tuanphan,

Recommended Posts

  • Solution
On 7/2/2021 at 3:43 PM, d_y_photography said:

Sorry about that, now the link is working.



Add to Design > Custom CSS

/* product title price on hover */
section.grid-meta-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    width: 100%;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all 0.3s;
pointer-events: none;
.grid-item:hover section {
    opacity: 1;
    transition: all 0.3s;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
1 hour ago, d_y_photography said:

Hey Tuanphan

Sorry i am back to you again, what about if i want the line in white , could you give me the code to add ? please

Thank you

If you mean the one at the top of the page:

.products.collection-content-wrapper .nested-category-children::after {
border-color: white;

If you want something else, you'll need to be more specific as your question is very vague.

Also, when asking for help, please remove the "disable right click" code; it is a nuisance for the people trying to help you and really doesn't do anything. It's 2021, if someone wants to copy an image, they will do it.

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.