Show Text Before Hover On Mobile Device, text colour and placement

Hi, how do I change the text color and position of portfolio page (showed before hover) on mobile only?

Now it is black and in the middle of the picture, I would like to get it white and in the bottom 🙂

Thanks !

What text are you referring to? Can you share your website URL and where this text is?

Hi Ziggy,

This is the page : https://www.ib-arch.com/projects

If you open it on desktop, the text (name) of each project appears 'after hover', which is fine and I would like to keep it as it is. However, when you open the same page on the mobile phone, the titles of the projects are seen before hover (constantly) . Example (Wood like Honey) :

So the question is, how to make these titles to be white colour and located on the bottom of the picture (not in the middle) ?

Thank you !

Ok, many thanks, this worked !

Also, is there a way to control the size of this text? I would like it to be a little smaller 🙂

Add this below color:#fff;

font-size:12px;

Amazing, works ! One more thing, if I may ask. Is there a way to have this title text under each picture (not on top of it) - only for mobile as well?

On 8/14/2023 at 7:53 PM, Ieva said:

Amazing, works ! One more thing, if I may ask. Is there a way to have this title text under each picture (not on top of it) - only for mobile as well?

You can use this CSS code

/* Mobile-Portfolio title under image */
@media screen and (max-width:991px) {
div#gridThumbs {
    display: block !important;
}
.portfolio-text {
    opacity: 1 !important;
    position: relative !important;
}
    .portfolio-text * {
        color: black !important;
    }
}

Thank you so much, Tuanphan, it works, amazing ! 🙂

Tuanphan, how would I get the text a little smaller with this code?

On 8/31/2023 at 5:23 AM, Martian said:

Tuanphan, how would I get the text a little smaller with this code?

add font-size to this code

.portfolio-text * {
        color: black !important;
font-size: 10px !important;
    }