Jump to content

How to add padding to hover text on gallery/grid items when using the Advanced CSS on duplicated portfolio pages?

Recommended Posts

Hi

I have duplicated my portfolio homepage to create separate work pages on my website and have managed to change the orientation of the images from portrait to landscape and change the number of columns (to create a point of difference on different pages) using the following code in the Advanced section of each page (rather than in the css section):

<style>
  .tweak-portfolio-grid-overlay-image-aspect-ratio-34-three-four-vertical .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-34-three-four-vertical .portfolio-grid-overlay .grid-item {
    padding-bottom: 66.667% !important; }
</style>

<style>
  @media screen and (min-width:768px) {
  div#gridThumbs {
    grid-template-columns: repeat(2,minmax(0,1fr));} }
</style>

image.png.e2cbeaa7f24bec1999886b1ff81ba920.png

 

The work pages have adopted the same styling for hover effects (red border on hover, grayscale on hover, title on hover etc) which is what I want, however the spacing has also been adopted which means that the text on the work pages appears over the image rather than under it on hover. 

Homepage showing the red border and titles on hover below each homepage image:

image.thumb.png.b9b3e28bb69f077cf546877204f3be0f.png

 

Work page (duplicated homepage/portfolio page - tweaked to change orientation and column number) which shows the project title displaying over the image:

image.thumb.png.08fb45e72acecd74cedc66269a825597.png

 

Is there a way to change the padding to the titles on hover on different portfolio pages so these appear below the image? Would this be done in the Advanced section or css section?

Thank you!

Link to comment
  • Replies 3
  • Views 552
  • Created
  • Last Reply

Top Posters In This Topic

On 3/19/2023 at 8:21 PM, css_charlotte said:

Hi,

It's https://www.workbyline.co.uk/ - let me know if you need any further access etc?

Thank you! 

Add to Retails or Residential or Hospitality Page Header

<style>
  .portfolio-text {
    position: static !important;
    margin-top: -20px !important;
}
</style>

 

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

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.