Show Text Before Hover On Mobile Device

On 5/9/2021 at 7:40 AM, tuanphan said:

Hi. You mean blog, contact links? Change opacity on hover?

Thanks for reaching out.

I would like to see this text be on the bottom center of the photo when I hover or drag on both mobile and desktop.

How can I change opacity in the code?

On 5/11/2021 at 10:21 AM, doctorjaywest said:

Thanks for reaching out.

I would like to see this text be on the bottom center of the photo when I hover or drag on both mobile and desktop.

How can I change opacity in the code?

Add to Design > Custom CSS

/* change opacity */
.portfolio-grid-overlay .portfolio-overlay {
    background-color: rgb(119, 104, 64, 0.5) !important;
}

Hi there,

I'm looking to get the text before hover effect on my mobile site, but it's not working. I used both of the following codes from this thread. What am I doing wrong?

Here is the link to my site: https://www.dispatchshows.com/2022-cws-copy

I'd like to replicate the look of this site on mobile that you worked with above: https://www.wilhelmmoser.com/

Thank you!

On 10/13/2021 at 11:42 PM, a_leonard said:

Hi there,

I'm looking to get the text before hover effect on my mobile site, but it's not working. I used both of the following codes from this thread. What am I doing wrong?

Here is the link to my site: https://www.dispatchshows.com/2022-cws-copy

I'd like to replicate the look of this site on mobile that you worked with above: https://www.wilhelmmoser.com/

Thank you!

Add to Page Header. 

<style>
  @media screen and (max-width:767px) {
  	.slide a:after {
    opacity: 1 !important;
}
    .image-slide-title {
    opacity: 1 !important;
}
  }
</style>

Hello just need help adding the opacity to my mobile version. Thank You 

www.jaypjp.com

On 5/25/2022 at 1:16 AM, Jaypjp said:

Hello just need help adding the opacity to my mobile version. Thank You 

www.jaypjp.com

You mean add image opacity on mobile?

12 hours ago, tuanphan said:

You mean add image opacity on mobile?

yes please.

On 5/25/2022 at 1:16 AM, Jaypjp said:

Hello just need help adding the opacity to my mobile version. Thank You 

www.jaypjp.com

Use this code

@media screen and (max-width:767px) {
.portfolio-overlay {
    opacity: 0.42 !important;
}
}

Hello, I think my question was almost covered here, but I didn't see my exact problem. I currently love the hover state on desktop for my homepage thumbnails: https://www.3ringstudio.com/

It works similarly on non-android phones when you touch the thumbnail (white screen with text appears), but for some reason, it doesn't work on iphones and the thumbnail is text-less when you hover over it. Is there a way to fix this? 

On 1/3/2023 at 2:39 AM, donaldely said:

Hello, I think my question was almost covered here, but I didn't see my exact problem. I currently love the hover state on desktop for my homepage thumbnails: https://www.3ringstudio.com/

It works similarly on non-android phones when you touch the thumbnail (white screen with text appears), but for some reason, it doesn't work on iphones and the thumbnail is text-less when you hover over it. Is there a way to fix this? 

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
a.grid-item:hover .portfolio-overlay {
    opacity: 1 !important;
}
.grid-item:hover .portfolio-text {
    opacity: 1 !important;
}
}

Hey @tuanphan you are such a legend here, thank you for your help!

Unfortunately, none of the code snippets here have worked for me. I'm trying to get my portfolio project titles to show up on mobile. My current url is: www.kylestebbins.com

I'm hoping to have the thumbnails perform like they did on my old 7.0 site. Here is a link to that one: https://kylestebbins.squarespace.com/ -- so ideally it is: 1st tap shows project, 2nd tap opens link.

Also, I'm only on a personal account so do not have ability to inject code into the header. I didn't have this feature in my old site either, so hoping there is a solution.

Thanks so much for any help! Your suggestions throughout these forums have been indispensable for me!

On 5/25/2023 at 4:09 AM, kstebbs said:

Hey @tuanphan you are such a legend here, thank you for your help!

Unfortunately, none of the code snippets here have worked for me. I'm trying to get my portfolio project titles to show up on mobile. My current url is: www.kylestebbins.com

I'm hoping to have the thumbnails perform like they did on my old 7.0 site. Here is a link to that one: https://kylestebbins.squarespace.com/ -- so ideally it is: 1st tap shows project, 2nd tap opens link.

Also, I'm only on a personal account so do not have ability to inject code into the header. I didn't have this feature in my old site either, so hoping there is a solution.

Thanks so much for any help! Your suggestions throughout these forums have been indispensable for me!

so ideally it is: 1st tap shows project, 2nd tap opens link

Hi, this needs JavaScript code (require a Business Plan or higher)

If you want title appear under image on mobile only, we can give the code

Hello! I also need help with this.

My portfolio images (screenshot attached) work fine with overlay on hover on desktop, but the colour overlay and title disappears when on mobile. Is it possible to have these appear with some custom code? 

I can upgrade to business plan if it requires Javascript.

Alternatively if this is not possible, please can I have the code for the title to appear under the image on mobile? 

My site is here: 

https://gopher-tomato-twpa.squarespace.com/portfolio

password: hello

Thanks. 

On 7/13/2023 at 3:48 PM, Red_Dot_Design said:

Hello! I also need help with this.

My portfolio images (screenshot attached) work fine with overlay on hover on desktop, but the colour overlay and title disappears when on mobile. Is it possible to have these appear with some custom code? 

I can upgrade to business plan if it requires Javascript.

Alternatively if this is not possible, please can I have the code for the title to appear under the image on mobile? 

My site is here: 

https://gopher-tomato-twpa.squarespace.com/portfolio

password: hello

Thanks. 

Add to Design > Custom CSS

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
    h3.portfolio-title {
    color: black !important;
}
}

Hello please i need help with similar thing but i want my hover test to show after hover just like desktop

On 10/27/2023 at 1:51 AM, Roseline said:

Hello please i need help with similar thing but i want my hover test to show after hover just like desktop

Can you share link to page on your site where you want to do this?