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

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
  }
}

12 hours ago, bangank36 said:

Please try this

@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);
  }
}

 

Thanks @bangank36 ! Exactly what I needed

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.

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

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);
  }
}

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;
}
}

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;
}

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;
}
}