Portfolio Hover: Align title to Left & images to Right

Site URL: https://www.maevabac.com/projets

Hello,

I'd love to make 2 changes in my portfolio project page: https://www.maevabac.com/projets

1. Aligning text on the left and images on the right, so they don't hide the text.
And keep the hover feature.

2. Adding a caption to project titles with a smaller font.

Can someone tell me how to do these things?

Thanks!

#1. Like this? https://www.loom.com/share/1bb0e40c784647c59057c67c1eca95b7

#2. Add to Design > Custom CSS

/* Projects page subtitle */
body#collection-61f2abee615c6449c1254291 {
span.portfolio-hover-item-content:after {
    font-size: 16px;
    display: block;
}
a.portfolio-hover-item[href="/projets/etapes"] span:after {
    content: "etapes sub";
}
a.portfolio-hover-item[href="/projets/art-faber"] span:after {
    content: "art faber sub";
}
a.portfolio-hover-item[href="/projets/yazoue"] span:after {
    content: "yazoue sub";
}
a.portfolio-hover-item[href="/projets/hprints"] span:after {
    content: "hpprints sub";
}
a.portfolio-hover-item[href="/projets/celadon"] span:after {
    content: "celadon sub";
}
}

Hi @tuanphan, are you able to share the solution to #1? I can't identify the class for the image that appears on hover.

#1 Do you mean something like this?

Hello, did you find a solution ? I have the exact same problem! 

Please see here: https://sprout-maracas-928x.squarespace.com/artists, password 1234

The titles aligns to the left, but i would like the photos to appear on the right!

Thank you so much

On 10/27/2023 at 12:17 AM, cdbb11 said:

Hello, did you find a solution ? I have the exact same problem! 

Please see here: https://sprout-maracas-928x.squarespace.com/artists, password 1234

The titles aligns to the left, but i would like the photos to appear on the right!

Thank you so much

You can add this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:992px) {
.portfolio-hover-base {
    left: 50%;
    width: 50%;
}
}

On 10/29/2023 at 2:46 AM, tuanphan said:

You can add this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:992px) {
.portfolio-hover-base {
    left: 50%;
    width: 50%;
}
}

 

Thank you so much! It does help, the image is now showing on the right but it moves depending on where the cursor is. Meaning that if my cursor is at the very end of the item list, half of the image is cropped.... Is there any way to have the image appear on the right, but not move? have a fixed area?

Thank you!

Hi, I unfortunately missed @tuanphan's solution to #1.

Does anyone know which selectors to use for text alignment (e.g. align titles on the left of the page) and image alignment with the portfolio hover? Would love to learn them.

Thanks heaps

On 10/30/2023 at 10:59 PM, cdbb11 said:

Thank you so much! It does help, the image is now showing on the right but it moves depending on where the cursor is. Meaning that if my cursor is at the very end of the item list, half of the image is cropped.... Is there any way to have the image appear on the right, but not move? have a fixed area?

Thank you!

You can adjust left value in the code

On 11/1/2023 at 1:12 PM, Tempixel said:

Hi, I unfortunately missed @tuanphan's solution to #1.

Does anyone know which selectors to use for text alignment (e.g. align titles on the left of the page) and image alignment with the portfolio hover? Would love to learn them.

Thanks heaps

Depends on your site. If you share link to portfolio, we can give the code