Show Text Before Hover On Mobile Device

Site URL: http://www.ryanballphotography.com

Hi there, 

I have setup my homepage with three images as a grid:overlay. I have set this to show text after I hover, this is perfect for desktop browsers and I don't want to change this.  However for mobile devices, the text doesn't show (as the hover function does not work on touch devices). I therefore want to change this to "show text before hover" for mobile browsers, without affecting the desktop browser. So how do I keep "show text after hover" on the desktop browser and "show text before hover" on mobile devices. I'm using squarespace 7.1. web address is www.ryanballphotography.com.

Thanks 

Ryan

This is exactly what I was looking for with my mobile site. Thanks Tuanphan - as always!!

This is exactly what I needed! Thanks Tuanphan!

Is there a way to increase the overlay opacity so that the text is more legible? Essentially forcing the hover state to be active all the time on mobile?

Also how would I change the colour of the text in the portfolio blocks only on mobile?

This is the website https://susanwalshart.com/portfolio

9 minutes ago, Pangus said:

This is exactly what I needed! Thanks Tuanphan!

Is there a way to increase the overlay opacity so that the text is more legible? Essentially forcing the hover state to be active all the time on mobile?

Also how would I change the colour of the text in the portfolio blocks only on mobile?

This is the website https://susanwalshart.com/portfolio

Add to Home > Design > Custom CSS

.portfolio-overlay {
    opacity: 1 !important;
}
/* text color on mobile */
@media screen and (max-width:767px) {
.portfolio-text h3 {
    color: red !important;
}
}

I have tried to add this CSS and is not working. What am I doing wrong?

URL is: https://lily-lizard-l38c.squarespace.com/portfolio and password is JoelSmithDigital

Thanks,

Joel

6 hours ago, Joel_Smith said:

I have tried to add this CSS and is not working. What am I doing wrong?

URL is: https://lily-lizard-l38c.squarespace.com/portfolio and password is JoelSmithDigital

Thanks,

Joel

 

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  .design-layout-poster .image-card-wrapper {
    opacity: 1 !important;
    visibility: visible;
}
    .image-card-wrapper {
    background-color: rgba(64,64,75,0.75);
}
  }
</style>

4 hours ago, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  .design-layout-poster .image-card-wrapper {
    opacity: 1 !important;
    visibility: visible;
}
    .image-card-wrapper {
    background-color: rgba(64,64,75,0.75);
}
  }
</style>

 

Legend! Thank you so much!

A big thank you from Germany for your help, Tuanphan.
www.wilhelmmoser.com

Anke

Hi, I'm trying to increase the overlay opacity so the title text is more legible and have tried using the code listed above but it's still not working... I've attached a screenshot

URL is: https://bobcat-papaya-lp2t.squarespace.com/config/pages/5e2a4063cf311b15c0e8d32c

On 11/24/2020 at 1:20 PM, JanaH said:

Hi, I'm trying to increase the overlay opacity so the title text is more legible and have tried using the code listed above but it's still not working... I've attached a screenshot

URL is: https://bobcat-papaya-lp2t.squarespace.com/config/pages/5e2a4063cf311b15c0e8d32c

 

Add to Home > Design > Custom CSS

.portfolio-overlay {
    opacity: 0.75 !important;
}

On 2/18/2020 at 3:09 PM, tuanphan said:

Add to Home > Design > custom CSS

@media screen and (max-width:640px) {
.portfolio-text {
    opacity: 1 !important;
}
}

 

Hi there, thanks for this!

I was wondering if there's a way how to achieve the 'show after hover' effect on mobile devices? I've seen it on so many websites, so I'm surprised how difficult it seems to be to do this on Squarespace!

On 1/4/2021 at 7:22 AM, misashh said:

Hi there, thanks for this!

I was wondering if there's a way how to achieve the 'show after hover' effect on mobile devices? I've seen it on so many websites, so I'm surprised how difficult it seems to be to do this on Squarespace!

Can you share site url? We can check easier

On 2/17/2020 at 4:29 PM, ryan_ball said:

Site URL: http://www.ryanballphotography.com

Hi there, 

 

I have setup my homepage with three images as a grid:overlay. I have set this to show text after I hover, this is perfect for desktop browsers and I don't want to change this.  However for mobile devices, the text doesn't show (as the hover function does not work on touch devices). I therefore want to change this to "show text before hover" for mobile browsers, without affecting the desktop browser. So how do I keep "show text after hover" on the desktop browser and "show text before hover" on mobile devices. I'm using squarespace 7.1. web address is www.ryanballphotography.com.

 

Thanks 

Ryan

On 2/18/2020 at 3:09 PM, tuanphan said:

Add to Home > Design > custom CSS

@media screen and (max-width:640px) {
.portfolio-text {
    opacity: 1 !important;
}
}

 

On 2/17/2020 at 4:29 PM, ryan_ball said:

Site URL: http://www.ryanballphotography.com

Hi there, 

 

I have setup my homepage with three images as a grid:overlay. I have set this to show text after I hover, this is perfect for desktop browsers and I don't want to change this.  However for mobile devices, the text doesn't show (as the hover function does not work on touch devices). I therefore want to change this to "show text before hover" for mobile browsers, without affecting the desktop browser. So how do I keep "show text after hover" on the desktop browser and "show text before hover" on mobile devices. I'm using squarespace 7.1. web address is www.ryanballphotography.com.

 

Thanks 

Ryan

Hi,

I have the exact same issue with my pictures on mobile view. I have tried this code but it didnt work. Can you help me please? Thank you

URL: https://www.beetrootwholesomefood.com/shop

20 hours ago, Aliz said:

 

Hi,

I have the exact same issue with my pictures on mobile view. I have tried this code but it didnt work. Can you help me please? Thank you

URL: https://www.beetrootwholesomefood.com/shop

I see text under image here. You want?

On 04/02/2021 at 3:06 PM, tuanphan said:

I see text under image here. You want?

The name of the dishes (title) shows up, but the description which shows allergies ..etc only shows when you click on the picture and hover over it, which is fine on the website. However on mobile view it only shows the title and when I click on the picture it doesnt display the description for allergies etc...because hover doesnt work on mobile. Thats why Im wondering if this can be fixed on mobile view so customers can see the descreption which is very important for my business.

Thank you :)

Hi @tuanphan or @ryan_ball
I used the code tuanphan posted. it work for showing the text but I would like for it to have the opacity behind the text so it legible (example attached).

https://www.dancoaustin.com/
PW: letmesee

On 3/6/2021 at 12:25 AM, RM-WB said:

Hi @tuanphan or @ryan_ball
I used the code tuanphan posted. it work for showing the text but I would like for it to have the opacity behind the text so it legible (example attached).

 

https://www.dancoaustin.com/
PW: letmesee

Hi. Can you share link to page in screenshot? I don't see on homepage

On 3/7/2021 at 1:07 AM, tuanphan said:

Hi. Can you share link to page in screenshot? I don't see on homepage

@tuanphan
https://www.dancoaustin.com/projects
Its on the project page. screenshot  attached
thanks

On 3/8/2021 at 1:37 PM, RM-WB said:

@tuanphan
https://www.dancoaustin.com/projects
Its on the project page. screenshot  attached
thanks

 

Hi @tuanphan any luck finding a fix with the mobile project hover?

8 minutes ago, RM-WB said:

Hi @tuanphan any luck finding a fix with the mobile project hover?

Never mind i found a solution. thanks

Could you share what your solution was?

3 hours ago, Sebastian1570047979 said:

Could you share what your solution was?

He used this CSS

@media screen and (max-width: 640px) {
    .portfolio-text {
        opacity:1 !important
    }
}

Hello, I haver been using the custom code you posted earlier and it worked successfully to get the hover effect on the mobile device. Would you be able to share an addendum to the code so that the text hovers on the bottom center as opposed to the bottom left where it currently is placed? Thank you.

URL: www.jaywestpt.com

This is what I have used already:

@media screen and (max-width:640px) {
.portfolio-text {
    opacity: 1.25 !important;
}
}
/* text color on mobile */
@media screen and (max-width:767px) {
.portfolio-text h3 {
    color: white !important;
}
}

22 hours ago, doctorjaywest said:

Hello, I haver been using the custom code you posted earlier and it worked successfully to get the hover effect on the mobile device. Would you be able to share an addendum to the code so that the text hovers on the bottom center as opposed to the bottom left where it currently is placed? Thank you.

URL: www.jaywestpt.com

This is what I have used already:

@media screen and (max-width:640px) {
.portfolio-text {
    opacity: 1.25 !important;
}
}
/* text color on mobile */
@media screen and (max-width:767px) {
.portfolio-text h3 {
    color: white !important;
}
}

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