Jump to content

Portfolio hover on mobile

Recommended Posts

On 11/22/2023 at 5:44 PM, ZaheemV said:

I have a Portfolio Overlay on the home page. The hover effect won't work properly on mobile. I seek to use a similar to effect on mobile like the one here : https://www.arcortese.com

Does anyone have the solution for this?

My website URL: http://bellwethergo.com/

Hi,

What should it look like on mobile? And both site are 7.1, you should to able same with Portfolio Page layout

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/24/2023 at 3:20 AM, tuanphan said:

Hi,

What should it look like on mobile? And both site are 7.1, you should to able same with Portfolio Page layout

 

Hey, thanks for the reply!

I am working on a new front page: Bellwethergo.com/front-page-2

I have been looking for the code to have this new front page auto scroll when on mobile similar to this website here: https://www.arcortese.com

The hover effect on my page currently is not applicable on mobile due to users not having a cursor to hover with. Which pushed me to ask around here!

Link to comment

Hi,

Thanks for the simple code for permanent text overlay Tuanphan, it is working great for me. But I would like to change the colour of the text from the usual desktop overlay, however the code below doesn't change the color, any idea why? thanks

@media screen and (max-width:640px) {
.portfolio-text {
    opacity: 1 !important;
    color:#E9F3F2 !important;
}
}
Link to comment
On 11/27/2023 at 11:21 AM, ZaheemV said:

Hey, thanks for the reply!

I am working on a new front page: Bellwethergo.com/front-page-2

I have been looking for the code to have this new front page auto scroll when on mobile similar to this website here: https://www.arcortese.com

The hover effect on my page currently is not applicable on mobile due to users not having a cursor to hover with. Which pushed me to ask around here!

With autoscroll

I checked again, example site is 7.0 version, it looks like that is features by default, I don't know code to achieve this

However you can consider using Gallery Slideshow for mobile, then enable Autoscroll feature.

We can give you add 3 text links over Gallery Slideshow + make slideshow appears on mobile only

What do you think?

23 hours ago, KeithSWD said:

Hi,

Thanks for the simple code for permanent text overlay Tuanphan, it is working great for me. But I would like to change the colour of the text from the usual desktop overlay, however the code below doesn't change the color, any idea why? thanks

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

 

23 hours ago, KeithSWD said:

Hi,

Thanks for the simple code for permanent text overlay Tuanphan, it is working great for me. But I would like to change the colour of the text from the usual desktop overlay, however the code below doesn't change the color, any idea why? thanks

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

Text uses h3, so the code should be

@media screen and (max-width:767px) {
.portfolio-text {
    opacity: 1 !important;
}
.portfolio-text h3 {
    color:#E9F3F2 !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/28/2023 at 4:36 AM, tuanphan said:

With autoscroll

I checked again, example site is 7.0 version, it looks like that is features by default, I don't know code to achieve this

However you can consider using Gallery Slideshow for mobile, then enable Autoscroll feature.

We can give you add 3 text links over Gallery Slideshow + make slideshow appears on mobile only

What do you think?

 

That would be great!

Link to comment
  • 1 month later...

Hello @tuanphan,

I have the same problem with all the hover effects not showing on the mobile version in the portfolio images when scrolling.
My website is https://www.wolk.studio/professional and I want to have the text position, hover effects and darkening of the image like in the following example https://www.shortstache.com/professional

As far as I see his hover effect works on the first touch and then on the second touch the portfolio project is opening.

Could you suggest the CSS ?

Thank you very much in advance.

Edited by ggimishev
Link to comment
On 1/18/2024 at 3:09 PM, ggimishev said:

Hello @tuanphan,

I have the same problem with all the hover effects not showing on the mobile version in the portfolio images when scrolling.
My website is https://www.wolk.studio/professional and I want to have the text position, hover effects and darkening of the image like in the following example https://www.shortstache.com/professional

As far as I see his hover effect works on the first touch and then on the second touch the portfolio project is opening.

Could you suggest the CSS ?

Thank you very much in advance.

What is password?

image.png.12aa9c297f5d8f0b7c6153652342c30a.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

@ggimishev how did you solve this in the end?

@tuanphan could you maybe share the code for this solution that you mentioned earlier?

On 11/28/2023 at 10:36 AM, tuanphan said:

However you can consider using Gallery Slideshow for mobile, then enable Autoscroll feature.

We can give you add 3 text links over Gallery Slideshow + make slideshow appears on mobile only

What do you think?

 

Link to comment
On 2/8/2024 at 5:31 PM, CorinnaR said:

@ggimishev how did you solve this in the end?

@tuanphan could you maybe share the code for this solution that you mentioned earlier?

 

You can use Gallery Slideshow first, then share page url, I can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan

Yes, kind of! the text is now basically just the title of the gallery image showing.

is there another way to add text over this being able to for example change the fontsize and add more than 3 lines of text? it just cuts off there right now. that might be helpful for the future. 

Link to comment
On 2/14/2024 at 9:59 PM, CorinnaR said:

@tuanphan

Yes, kind of! the text is now basically just the title of the gallery image showing.

is there another way to add text over this being able to for example change the fontsize and add more than 3 lines of text? it just cuts off there right now. that might be helpful for the future. 

In Description box, instead of using this

SCHRÖDINGER

you can use this

SCHRÖDINGER<br/>Line 2<br/>Line 3

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.