Jump to content

Portfolio page link from portfolio in galleries to portfolio on home page

Recommended Posts

Hello, I have a portfolio on my galleries page. I'm trying to have a selection of my favourite portfolios on my homepage but cannot work out how they would link to the same place without having to build two pages exactly the same. I chose portfolios rather than just using images with a link as I wanted the text and darken when you hover the mouse over the top? Any help is much appreciated

Link to comment
  • Replies 20
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...
On 10/13/2023 at 9:34 PM, ConnorMcLarenPhotography said:

Yes code would be very helpful, I want the picture to darken and light text appear when you hover over the image. That would be great, thank you

What is site url?

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
On 10/23/2023 at 4:20 PM, ConnorMcLarenPhotography said:

Yes I’d like to be able to make those lead to the same pages as the ones in the galleries page so that I don’t have to duplicate pages. Either the link on those or if it’s easier I can change to regular pictures and then just need the code for the hover effect of darken and light text same as what is on the portfolio?

Yes. Use Gallery will be easier.

You can share link to page where you use gallery page, we can give code to achieve hover

(If you use Gallery Section Grid, you can also try this CSS code first)

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

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

Hello,

I've tried adding in the code you've given there but I can't see what it's doing?

https://www.connormclaren.co.uk/galleries

This is the link to my galleries page which will have lots of pictures to make have the same hover effect as the portfolio page. I've also noticed the pictures don't go right to the edge of the screen, is there code for this too?

Thank you for your help.

Link to comment

My code for Gallery Section, but you are using Image Blocks, so it won't work.

You can consider using Gallery Section, it will easier to achieve with code, with Image Block, each image will need a different code so your case will require a lot of code

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
On 11/3/2023 at 9:41 PM, ConnorMcLarenPhotography said:

I have now changed the image blocks to gallery on this page https://www.connormclaren.co.uk/galleries

 

I see hover works here, now you want to add link or?

image.png.300a05c1f502c0db09f89a7e8359ae7e.png

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
On 11/19/2023 at 8:15 PM, ConnorMcLarenPhotography said:

I tried replacing this line but it comes up with a message in red at the bottom saying "Syntax error on line 41"

Can you send all current code? We can check problem easier

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

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background:rgba(0,0,0,0.85) /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

This is the full code I'm using, I tried adding a semicolon (background:rgba(0,0,0,0.85); /* overlay color */) which removed the syntax message but the code still didn't achieve what I was hoping for.      

 

 

Link to comment

These code for LINKED IMAGES, but you haven't added any links to image, so it won't work.

Use this new code

/* Gallery hover - with No Link */
figure[class*="gallery"]:not(.gallery-slideshow-item) {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
div[class*="-item-wrapper"]:after {
    background:rgba(0,0,0,0.85); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

image.png.1b3e3d4a717689f31333e3fbb49bf0e5.png

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

You can add font size to this code

image.png.7e911856f09817a641d0b2d08624c691.png

it will be

/* title */
.gallery-caption p.gallery-caption-content {
	font-size: 30px !important;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}

 

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.