Jump to content

Remove hover overlay on Portfolio page on mobile (Have text show without hover on mobile)

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://puma-orb-9lss.squarespace.com/projects

I'd like to have the portfolio overlay off when my website is viewed on mobile. Or in other words, I want all the text to show and not be hidden on mobile on the portfolio page. 

I should note that I have custom animations that override the overlay a bit. I added code such as the one below to prevent it on mobile. Maybe irrelevant but adding just in case. 

@media screen and (max-width:640px) {
  .portfolio-grid-overlay .grid-item .portfolio-title {
    transition: none !important
  }
}

 

Link to comment
  • Solution

Please try this

image.thumb.png.cc9bc78da8af2e7d8f7c948174bbc860.png

@media screen and (max-width:640px) {
  .portfolio-grid-overlay .grid-item .portfolio-text {
    opacity: 1 !important;
  }
  .portfolio-grid-overlay .grid-item .portfolio-title {
      transition: none !important;
      transform: translateY(0);
  }
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...
3 hours ago, concretenz said:

Thank you for this 🙂 

- This should be standard on 7.1 I think. Seriously the amount of custom css required for 7.1 is painful.

I think some of the feature work for you and some not, other people may not want this customisation

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 9 months later...

Hi, I've tried this for my portfolio site. But I cant get it to work.

I've managed with help to get my text to show in the mobile version. But the hover effect is still in the mobile version.

This is the code i use for getting the text to show up in the mobile version:

 

@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}

.portfolio-text h3 {
    font-size: 18px !important;
  color: black !important;
   text-align: left !important;
  font-weight: 400 !important;
 
 
}
.portfolio-text h3 span {
    font-size: 15px !important;
  color: black !important;
  font-weight: 100 !important;
}
 
 
}

I tried add following code to it, but it still gets hover effect.

@media screen and (max-width:640px) {
  .portfolio-grid-overlay .grid-item .portfolio-text {
    opacity: 1 !important;
  }
  .portfolio-grid-overlay .grid-item .portfolio-title {
      transition: none !important;
      transform: translateY(0);
  }
}

 

 

 

Edited by NGO2045
Link to comment
9 hours ago, NGO2045 said:

Hi, I've tried this for my portfolio site. But I cant get it to work.

I've managed with help to get my text to show in the mobile version. But the hover effect is still in the mobile version.

This is the code i use for getting the text to show up in the mobile version:

 

@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}

.portfolio-text h3 {
    font-size: 18px !important;
  color: black !important;
   text-align: left !important;
  font-weight: 400 !important;
 
 
}
.portfolio-text h3 span {
    font-size: 15px !important;
  color: black !important;
  font-weight: 100 !important;
}
 
 
}

I tried add following code to it, but it still gets hover effect.

@media screen and (max-width:640px) {
  .portfolio-grid-overlay .grid-item .portfolio-text {
    opacity: 1 !important;
  }
  .portfolio-grid-overlay .grid-item .portfolio-title {
      transition: none !important;
      transform: translateY(0);
  }
}

 

 

 

Try this

@media screen and (max-width:767px) {
.grid-item:hover .grid-image-inner-wrapper:after {
    opacity: 0 !important;
}
}

 

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
5 hours ago, tuanphan said:

Try this

@media screen and (max-width:767px) {
.grid-item:hover .grid-image-inner-wrapper:after {
    opacity: 0 !important;
}
}

 

 

 Thank you!! 😄

I also added that the images zoomed a bit in the project grid on hover in the desktop version. Is that possible to disable too?

This is the code I used for that:

.grid-item:hover .portfolio-overlay {
    opacity: 0 !important;

}
.grid-item .grid-image-inner-wrapper {
    position: relative;
}

.grid-item .grid-image-inner-wrapper:after {
    content: "";
    transition: opacity 0.5s;
    opacity: 0;
}

.grid-item:hover .grid-image-inner-wrapper:after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    background: #000000;
    opacity: 0.6;
}

.no-touch .portfolio-grid-basic .grid-item:hover .grid-image {
    opacity: 1;
}

 

Edited by NGO2045
Link to comment
7 hours ago, NGO2045 said:

 Thank you!! 😄

I also added that the images zoomed a bit in the project grid on hover in the desktop version. Is that possible to disable too?

This is the code I used for that:

.grid-item:hover .portfolio-overlay {
    opacity: 0 !important;

}
.grid-item .grid-image-inner-wrapper {
    position: relative;
}

.grid-item .grid-image-inner-wrapper:after {
    content: "";
    transition: opacity 0.5s;
    opacity: 0;
}

.grid-item:hover .grid-image-inner-wrapper:after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    background: #000000;
    opacity: 0.6;
}

.no-touch .portfolio-grid-basic .grid-item:hover .grid-image {
    opacity: 1;
}

 

You can edit it to this

@media screen and (min-width:992px) {
.grid-item:hover .portfolio-overlay {
    opacity: 0 !important;

}
.grid-item .grid-image-inner-wrapper {
    position: relative;
}

.grid-item .grid-image-inner-wrapper:after {
    content: "";
    transition: opacity 0.5s;
    opacity: 0;
}

.grid-item:hover .grid-image-inner-wrapper:after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    background: #000000;
    opacity: 0.6;
}

.no-touch .portfolio-grid-basic .grid-item:hover .grid-image {
    opacity: 1;
}
}

 

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.