Jump to content

Darken portfolio images when hovering

Go to solution Solved by Ziggy,

Recommended Posts

You can use this CSS property:

filter:brightness(0.75);

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

This is for a portfolio page? Have you set up the page and hover? Can you share your website and this page?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
4 minutes ago, Ziggy said:

This is for a portfolio page? Have you set up the page and hover? Can you share your website and this page?

It is a portfolio page.
This is the page - wolk.studio/professional and I want to make it look like this one - shortstache.com/professional

There are also size differences in the mobile version that I don’t know how to fix.

 

 

Edited by ggimishev
Link to comment

Try this Custom CSS:

.portfolio-grid-overlay .portfolio-overlay {
    background-color: rgb(0, 0, 0);
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 hours ago, ggimishev said:

There are also size differences in the mobile version that I don’t know how to fix.

What do you want it to look like?

Try this as a guess at what you might want:

@media only screen and (max-width:767px) {
  .tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-item {
    padding-bottom: 22vh;
  }
}
Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution
3 minutes ago, ggimishev said:

Is there a way to make to fade in so it appears a bit slower?

Yes, use this CSS:

.portfolio-grid-overlay .grid-item .portfolio-text, .portfolio-grid-overlay .grid-item .portfolio-overlay  {
    transition: opacity ease 800ms;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
35 minutes ago, Ziggy said:

What do you want it to look like?

Try this as a guess at what you might want:

@media only screen and (max-width:767px) {
  .tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-ultra-widescreen .portfolio-grid-overlay .grid-item {
    padding-bottom: 22vh;
  }
}

This one works also perfect. Changed just the numbers a bit. 
 

Is there a way also to shorten the header a bit like in the example?

Link to comment
2 minutes ago, ggimishev said:

Is there a way also to shorten the header a bit like in the example?

I'm not sure what you're referring to.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
5 minutes ago, ggimishev said:

The header with the logo and the navigation menu is a bit longer in terms of dimensions when you compare it to the header in the website example.

You can adjust the size of your logo on desktop and mobile, as well as the padding, this is in the Header Settings.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

How can I apply all those settings that were meant for the desktop version to also apply to the mobile version's navigation bar?

 

//HEADER ALL PAGES
.header-nav-item--active a {
background-image: none!important;
font-weight: bold;
}
header#header a {
        transition: all 0.3s ease;
}
.header-nav-item>a:hover {
    color: #475758 !important;
    transition: all 0.3s ease;
}
.header-nav-folder-item:hover a {
    color: #475758 !important;
    transition: all 0.3s ease;
}
/* desktop*/
.header-nav-item--active>a {
    color: #475758 !important;
}
/* folder */
.header-nav-folder-item--active a {
    color: #475758 !important;
}

.header-nav-item a {
    font-family: 'Axiforma';
}

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.