Portfolio, mobile view with static overlay

Hi all,

For mobile view on my portfolio page. I want the overlay text to be static, but at the bottom (on top of) the image. Like below:

Anyone have suggestion on code here? I have tried to replicate what I have in the gallery above but without success since this is a portfolio (not gallery).

What is your site url? We can check easier

yes of course! andreassoteriou.com

under subsection "projects".

And sorry for late reply!

Add to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:991px) {
.portfolio-text {
    opacity: 1 !important;
    top: unset !important;
    background-color: rgba(0,0,0,0.7) !important;
}
.portfolio-overlay {
    opacity: 1 !important;
    top: unset !important;
}
}

On 1/8/2024 at 10:34 AM, tuanphan said:

Add to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:991px) {
.portfolio-text {
    opacity: 1 !important;
    top: unset !important;
    background-color: rgba(0,0,0,0.7) !important;
}
.portfolio-overlay {
    opacity: 1 !important;
    top: unset !important;
}
}

 

thank you so much! the top project in the portfolio now resembles how i would like it, but the other ones seems just black?

Is there also a way to make the static overlay thinner? 

Many thanks for your reply!

@media screen and (max-width:991px) {
.portfolio-text {
    opacity: 1 !important;
    top: unset !important;
    background-color: rgba(0,0,0,0.7) !important;
}
.portfolio-overlay {
    opacity: 1 !important;
    top: unset !important;
}
}

Thank you so much!