Portfolio grid overlay & titles in mobile version

Hi, I'm trying to set up my portfolio page so that it shows the featured images of the projects clearly, and then, after hovering, overlays with an opaque layer and the project title. It works perfectly in the desktop version, but on the mobile version there is no "hovering", so no opacity and no title; it just clicks straight through to the project.

I need the title to show, mainly to credit the photographer, and so I've had to switch it round so that the featured images are opaque with the title to start, and then clear after hovering; Wedding Flowers — The Wild Bunch Wedding Flowers, Ireland 

But I'm not happy with it; I'd like the page to open full of clear bright images, not dull overlaid ones! I'd appreciate any ideas! Thank you 🙂

Hi,

You mean remove overlay color on mobile or?

Or how about force title under image on mobile only?

On 2/17/2023 at 8:53 AM, tuanphan said:

Hi,

You mean remove overlay color on mobile or?

Or how about force title under image on mobile only?

Thanks for replying Tuanphan and sorry for my delay. 

Yes I'd like to start out with no overlay, just the clear photo, and then get the overlay (I need it to be able to see the title) when you hover. It's fine on desktop but on mobile you don't hover I think? So there's no overlay and no title, you just click on the image and it clicks through to the portfolio. 

(when I'm editing from the laptop, it looks like it works on the mobile version, but in real life, from my phone, it doesn't)

Yes If I can't figure anything out I'll have to change it to "grid simple" with the title underneath, I just much prefer the look of the "grid overlay"

Thanks very much

19 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(1,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
}

 

That worked! Thank you so much! Delighted 🙂

That is a great fix. Is it possible to have the titles show on top of the photos in Desktop View on hover but have it the opposite on Mobile View (titles show before hover)?

The site is debrasealphotography.com

On 12/3/2023 at 1:28 AM, jonjorc said:

That is a great fix. Is it possible to have the titles show on top of the photos in Desktop View on hover but have it the opposite on Mobile View (titles show before hover)?

The site is debrasealphotography.com

You mean

Desktop: same as current state

Mobile: Always show overlay + title over image?

Hi Tuanphan

On 12/4/2023 at 12:33 AM, tuanphan said:

You mean

Desktop: same as current state

Mobile: Always show overlay + title over image?

I used your code, which worked perfectly to move the titles underneath the image but I'd love to know how to keep the desktop same as current state and make mobile version show the title and overlay as default. This is the site: https://www.emmajoytheweddingplanner.co.uk/weddings-portfolio

I would like it to be more like this example site on mobile: https://hollyclarkphotography.co.uk/weddings/

Thank you!

20 hours ago, Nergis said:

Hi Tuanphan

I used your code, which worked perfectly to move the titles underneath the image but I'd love to know how to keep the desktop same as current state and make mobile version show the title and overlay as default. This is the site: https://www.emmajoytheweddingplanner.co.uk/weddings-portfolio

I would like it to be more like this example site on mobile: https://hollyclarkphotography.co.uk/weddings/

Thank you!

Use CSS code

@media screen and (max-width:991px) {
   .portfolio-overlay {
    opacity: 0.85 !important;
    left: 20px !important;
    top: 20px !important;
    width: calc(~"100% - 40px") !important;
    height: calc(~"100% - 40px") !important;
}
.portfolio-text {
    opacity: 1 !important;
}}