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

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

With Homepage, you can use Gallery Section Grid, then we can give code to make text darken when hover. What do you think? If you can't make it work, let me know, I will do a quick guide in comment.

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

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?

https://www.connormclaren.co.uk

On 10/20/2023 at 3:49 PM, ConnorMcLarenPhotography said:

https://www.connormclaren.co.uk

Thank you. You mean change 9 images under this section to custom urls?

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?

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;
}

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.

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

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

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?

The hover is working but I was hoping to make it look like the hover effect on portfolios, when it goes dark with bigger light text?

Change this line

 background: #f4f6ea; /* overlay color */

to

 background:rgba(0,0,0,0.85) /* overlay color */

(You can adjust 0.85)

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

I thought that may be the case and have tried it and it got rid of the message but the code doesn't seem to change anything

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

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.      

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;
}

That seems to work fine, thank you. Is there a way I can increase the size of the text that appears?

You can add font size to this code

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;
}

That's great thanks. I have it set to rows of 3 on desktop but it seems to default to rows of two for mobile, is there a code to make it just single image rows on mobile?

On 8/27/2024 at 11:10 PM, ConnorMcLarenPhotography said:

That's great thanks. I have it set to rows of 3 on desktop but it seems to default to rows of two for mobile, is there a code to make it just single image rows on mobile?

You can use this CSS code

@media screen and (max-width:767px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}
}

Thank you. Is there a way I can make the buttons smaller for the phone without affecting the desktop? I have 4 buttons in a row which sits nice on the desktop but when they’re on the phone they’re too big to fit in a row so I have to stack them on top of each other? Please see attached pictures

On 8/31/2024 at 10:06 PM, ConnorMcLarenPhotography said:

Thank you. Is there a way I can make the buttons smaller for the phone without affecting the desktop? I have 4 buttons in a row which sits nice on the desktop but when they’re on the phone they’re too big to fit in a row so I have to stack them on top of each other? Please see attached pictures

 

 

I think you can edit page > Click Mobile icon on top right > Then drag 4 items same line

Use this code to Custom CSS to reduce their size

@media screen and (max-width:767px) {
.fe-6544ffc4966f3e0e4f844d1b>div:not(:first-child) a {
    font-size: 10px !important;
}
}