Modify Portfolio Cover

Hello there!

I am not sure if it is possible what I am trying to achieve.
This is what my website currently looks like https://www.lacalifornie.es/studio

I will like to modify the cover of each project. Remove the hover effect (white overlay and Project title) and instead have the Project Title layout at the bottom of the imagen with a color background. Both the image and title should be linked to the project page. See mock-up for reference. 

Thanks in advance!

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

a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
    padding: 5px !important;
    background-color: white;
}

Hi @tuanphan, your code is so close! Can the added background and Project title text added be part of the actual image instead of added to the bottom it? I prefer to keep the ratio of each cover as is. If wanted how can i adjust the font size?

Thanks!

Use this new code

a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    opacity: 1 !important;
    padding: 5px !important;
    background-color: rgba(255,255,255,0.75);
    top: unset !important;
}
h3.portfolio-title {
    font-size: 20px !important;
}

Thank you @tuanphan!

I tested and it woks. I have not implement your code yet, since I will like to remove the overlay effect the covers have on hover. If possible i will like to have this new layout show on hover instead. Something similar to this
https://fawngalli.com

Is this possible? Thanks so much!

To remove overlay on hover, use this code

a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
    opacity: 1 !important;
}
.portfolio-text {
    opacity: 1 !important;
    padding: 5px !important;
    background-color: rgba(255,255,255,0.75);
    top: unset !important;
}
h3.portfolio-title {
    font-size: 20px !important;
}
.portfolio-overlay {
    opacity: 0 !important;
}

to make text slide up on hover, like as example site, add this CSS under

/* Text hover slide up */
.portfolio-text {
    transform: translateY(100px);
    transition: all 0.3s ease;
}

a.grid-item:hover .portfolio-text {
    transform: translateY(0);
    transition: all 0.3s ease;
}

Thank you @tuanphan!
The code to remove the overlay on hover worked perfectly but not the other one it does a weird jump. I wonder if it is simpler and possible to have what I achieve  w you code show and currently live https://www.lacalifornie.es/studio show on hover?

On 12/1/2023 at 1:51 AM, LucyBold said:

Thank you @tuanphan!
The code to remove the overlay on hover worked perfectly but not the other one it does a weird jump. I wonder if it is simpler and possible to have what I achieve  w you code show and currently live https://www.lacalifornie.es/studio show on hover?

Which jump? I see nothing jump here. Can you describe in more detail?

Currently there is no jump because I did not add that part of the code.

/* Text hover slide up */
.portfolio-text {
    transform: translateY(100px);
    transition: all 0.3s ease;
}

a.grid-item:hover .portfolio-text {
    transform: translateY(0);
    transition: all 0.3s ease;
}

But if I do is when the jump happens.

I wonder If making what i currently have https://www.lacalifornie.es/studio but show on hover is the right way to go. Would this be possible @tuanphan?

Thank you!

On 12/6/2023 at 3:34 AM, LucyBold said:

Currently there is no jump because I did not add that part of the code.

/* Text hover slide up */
.portfolio-text {
    transform: translateY(100px);
    transition: all 0.3s ease;
}

a.grid-item:hover .portfolio-text {
    transform: translateY(0);
    transition: all 0.3s ease;
}

But if I do is when the jump happens.

I wonder If making what i currently have https://www.lacalifornie.es/studio but show on hover is the right way to go. Would this be possible @tuanphan?

Thank you!

Use this new code

/* Text hover slide up */
.portfolio-text {
    transform: translateY(100px);
    transition: all 0.3s ease !important;
}
a.grid-item:hover .portfolio-text {
    transform: translateY(0);
    transition: all 0.3s ease !important;
}
a.grid-item {
    overflow: hidden;
}

Thank you! @tuanphan! this works great on Desktop. Could we not have this hover behaviour happen on MOBILE?

 

On 12/8/2023 at 12:48 AM, LucyBold said:

Thank you! @tuanphan! this works great on Desktop. Could we not have this hover behaviour happen on MOBILE?

 

I checked on Chrome Mobile Preview & it works, Can you check it again?