Gallery - Text on Hover & Linking to page: not showing correctly on mobile

Hi everyone,

I'm stuck at a particular problem:

No. 1

I'm working on a gallery of album covers and want to create the exact same effect as on this page: https://www.metallica.com/releases/albums/

Meaning: hovering over the image makes it greyed out (in the above example it's red) and a text with a subtitle for the release year appears. Then you can click on the gallery image and it will take you to the respective page. I have managed all of this with the below CSS coding BUT once I switch to mobile the font size gets way too big and messes up the whole look of it (see screenshots 1 & 2 attached for "correct desktop" VS "messed up mobile"-view).

Also, the greyed out image effect appears only if I put a link on the image but not if I don't link it. Is there a way to make it appear without linking the image?

Can anybody please help me this? I have no idea about CSS and feel lucky to even have managed to get to the point where I am 😉 Also, the site isn't live yet, so I unfortunately can't share any link to it.

Thanks a lot!

CSS code

figure.gallery-grid-item {
    position: relative;
}
@media only screen and (min-width: 834px){
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #242526; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.80;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
.gallery-caption-content {
font-size: 17px !important; /* caption font size */
color: white; /*caption font color */
}
p.gallery-caption-content span {
  display:block;
  position: absolute;
  top: 53%;
  font-size: 16px;
  color: white;
  }
  }

Hi. Can you share link to page in screenshto? We can help easier

Hi, thanks for your reply!

Unfortunately the page isn't live yet, so I can't share any link. Can we somehow solve this without a live link?

Thanks a lot!

On 4/18/2021 at 5:21 PM, MK-Estate said:

Hi, thanks for your reply!

Unfortunately the page isn't live yet, so I can't share any link. Can we somehow solve this without a live link?

Thanks a lot!

If your site is trial/private, you can setup password & share url

Hello @tuanphan

I would like to utilize something similar for my homepage, but simpler with just one to two word page categories (Music, People, Product, etc.).

I would also like for these images to all be the same size, but I'm not sure how to do so.

Page link: https://www.michaelchan.co/home

On 3/23/2022 at 1:24 AM, chansserif said:

Hello @tuanphan

I would like to utilize something similar for my homepage, but simpler with just one to two word page categories (Music, People, Product, etc.).

I would also like for these images to all be the same size, but I'm not sure how to do so.

Page link: https://www.michaelchan.co/home

#1. Can you explain in more detail?

#2. It looks fine to me? Can you describe?

Thank you!

10 hours ago, tuanphan said:

#1. Can you explain in more detail?

#2. It looks fine to me? Can you describe?

Thank you!

Hello

The main request is to implement the same overlay in OP's original post above. Currently the overlay covers the bottom 1/4 of the image with small text that is left-justified. I want the overlay to cover the full image with larger, center-justified text. See my examples of what's currently there vs. what I'm proposing I want here.

The second request is to make all images the same size in the layout. The second row is currently comprised of three images—one large, and two smaller squares. I want them all to be like they are in the first and third rows—two big squares. See attached examples.

I would love to second that.

My website is live: https://www.metakphotography.com

No text shows up on scroll on mobile phone. The expected behavior is that when its at the top of the screen the first item has the text shown. By the time you scroll all the way down the last item has the text highlighted.

Is there something in the work to have a similar effect then the on hover possibility but for mobile phone?

Thank you.

On 7/28/2022 at 11:39 PM, JulesM said:

I would love to second that.

My website is live: https://www.metakphotography.com

No text shows up on scroll on mobile phone. The expected behavior is that when its at the top of the screen the first item has the text shown. By the time you scroll all the way down the last item has the text highlighted.

Is there something in the work to have a similar effect then the on hover possibility but for mobile phone?

Thank you.

You mean make text appear on scroll on mobile?

Not possible to do this.