Title overlay for portfolio items

Hi,

is it possible to show portfolio titles over featured images using CSS?

The hover functionality does not help users of touch screen devices, so I’d like to overlay title all the time.

I’ve searched this forum for help, alas no luck.

Help appreciated!

TIA,
Jouni

A shot in the dark since I do not have any site access right now to try this out myself. But in the Custom CSS, try this:

.inner-title.hover-reveal .title {
opacity: 1;
}

Fingers crossed :slight_smile:

Thanks for your brave attempt; unfortunately the code did not seem to do anything (visible).

My two pages, where my question applies:

http://kajovisuals.com/portfolio

So I’d like to show the portfolio titles there even without hovering.

Thanks again.

Hi Jouni,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

.masonry .inner-title.hover-reveal .title {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -webkit-transform: translate3d(0, -50%, 0);
    top: 50%;
}

Best Regards,
Movin

Thanks Movin, works as ordered.

However, I’m now faced with another problem, which is so close to the original subject that I dare to continue here with another question. Let me know if a separate thread is required.

As the overlay title text is now shown without the dimming hover effect, the default white font shows very poorly over my featured images. Thus I’d like to try different font colours and sizes. Looks like the default font size is 14px and colour white, so say I’d like to try 20px bold in black colour. How do I change them in the above context?

Many thanks,
Jouni

Ps. It might be hard to achieve optimal separation with one font for six featured images (as they will be of different brightnesses and hues), so I might possibly have to ask in a separate thread how to apply the dimming hover effect by default without actually hovering over using a mouse pointer.

To increase its font size and change its color you can use the below CSS code.

.masonry .inner-title.hover-reveal .title h5 {
    font-size: 20px;
    font-weight: bold;
}

To apply the dimming hover effect by default without actually hovering over using a mouse pointer please use the following CSS code.

.masonry .inner-title.hover-reveal:before {
    opacity: 1;
}
.masonry .inner-title {
    opacity: .95;
}

Thanks Movin, this gives me enough tools for further tweaking.

You are most welcome here :slight_smile: