Jump to content

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

Recommended Posts

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;
  }
  }

Screen 1 Desktop (correct).JPG

Screen 2 Mobile (messed up).JPG

 

Edited by MK-Estate
Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 11 months later...
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!

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Current Overlay.png

Proposed Overlay.jpg

Current Layout.jpg

Proposed Layout.jpg

Link to comment
  • 4 months later...

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.

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.