Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Show Text Before Hover On Mobile Device


ryan_ball

Question

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

Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > custom CSS @media screen and (max-width:640px) { .portfolio-text { opacity: 1 !important; } }  

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 des

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 !impo

Posted Images

12 answers to this question

Recommended Posts

  • 0

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

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0
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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0
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!

Link to post
  • 0

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

 

Screen Shot 2020-11-24 at 5.19.37 pm.png

Link to post
  • 0
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

 

Screen Shot 2020-11-24 at 5.19.37 pm.png

Add to Home > Design > Custom CSS

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0
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!

Link to post
  • 0
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...