Jump to content

Need some help with customising Portfolio Hover layout

Recommended Posts

Hello everyone!
I'm struggling to make Portfolio page work the way I want. It is in Hover: Follow Cursor layout. 

There are two issues:
1) I want the title of the project to be in front on hover (as shown in the Image1). There is even an option within Foursquare to do so (Selection In Front). However, after I save it with this area ticked on it doesn't work anymore and just shows the project image on hover without a title (Image2). I guess there is a need to make something " !important " in Custom CSS, but I have no idea what command I need to make important so it will always pay attention to that.
2) The project image can be dragged all the way to the bottom of the section (while moving the cursor) but seems like there is a top margin. Is there a way to get rid of the top margin? And also is it possible to change the size of a portfolio section like that?

The website is: https://gardenia-copper-8dp3.squarespace.com/
Password: LightboxAnything

Really appreciate your help.

Image1.png

Image2.png

Edited by ufotofu
Clarify
Link to comment
  • Replies 2
  • Views 285
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

So I found a solution for the first issue.
This code helped me out:

.portfolio-hover-item:hover{
    z-index:1 !important;}

However, if there is a Delimiter set in between project titles (I had a slash) it brings it to the front as well. I don't know how to get rid of this so I decided to get rid of any Delimiters 🙂


Still struggling with the second issue though. 

4 hours ago, ufotofu said:

2) The project image can be dragged all the way to the bottom of the section (while moving the cursor) but seems like there is a top margin. Is there a way to get rid of the top margin? And also is it possible to change the size of a portfolio section like that?

The website is: https://gardenia-copper-8dp3.squarespace.com/
Password: LightboxAnything

Anyone?

 

Link to comment

Have been searching for the solution all the day and found this code:
 

@media screen and (min-width:768px) {
[data-section-id="63b98b7bf0927a3da7f725da"] {
    padding-top: 0 !important;
    }

It helped to get rid of the top padding but moved the project titles up as well. And also behaves weirdly on a laptop screen (it hides the upper titles row).

Is there a way to reduce the section top padding only for the overlay images without affecting the titles?
 

Screen Shot 2023-01-13 at 6.46.49 pm.png

Edited by ufotofu
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.