Jump to content

Portfolio hover on mobile

Recommended Posts

  • 2 weeks later...
19 hours ago, ryan_ball said:

I have the same issue, my website is www.ryanballphotography.com I would like to keep the hover function on the desktop comp, but on mobile show the title all the time. 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.portfolio-text {
    opacity: 1 !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
  • 1 year later...

I am having the same issue as people on this forum. I am trying to force the hover state on my portfolio grid in mobile. Ideally when it was in mobile the image would automatically darken with opacity at .35 and the text would automatically appear in the center of the image. Essentially exactly how it looks when you hover in desktop.

Does anyone know the CSS to make this happen? My site is: https://www.michaelhcassell.com/

Link to comment
On 4/8/2021 at 10:47 PM, mcass44 said:

I am having the same issue as people on this forum. I am trying to force the hover state on my portfolio grid in mobile. Ideally when it was in mobile the image would automatically darken with opacity at .35 and the text would automatically appear in the center of the image. Essentially exactly how it looks when you hover in desktop.

Does anyone know the CSS to make this happen? My site is: https://www.michaelhcassell.com/

I see you solved with this CSS

@media screen and (max-width: 640px) {
    .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text,.tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item .portfolio-text {
        opacity:1 !important
    }

    .portfolio-overlay {
        opacity: .35 !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
  • 8 months later...

Hi!

As others on this forum I would like to know if it is possible to have hover effect on mobile exactly the same as displayed on desktop for portfolio website?

if not possible could it be possible to leave overlaid hover effect with text in center on desktop (as it is now) and change on mobile leaving text fixed but below image as if it were simple grid display?

thanks a lot!!

https://valenciabiscottini.com

Link to comment
On 12/21/2021 at 6:33 PM, VBA said:

Hi!

As others on this forum I would like to know if it is possible to have hover effect on mobile exactly the same as displayed on desktop for portfolio website?

if not possible could it be possible to leave overlaid hover effect with text in center on desktop (as it is now) and change on mobile leaving text fixed but below image as if it were simple grid display?

thanks a lot!!

https://valenciabiscottini.com

Add this to Design > Custom CSS

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(1,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !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
  • 2 weeks later...
On 12/24/2021 at 9:37 PM, tuanphan said:

Add this to Design > Custom CSS

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

 

This didn't work for me. It just made the spaces between my columns expand. I have the same problem as the previous commenter, and I want the same hover plus overlay/title effect from the desktop version in the mobile version. Could I get some help with this? 

Here is my website:

https://www.majoaparicio.com/

Thank you!

Link to comment
6 hours ago, Majojo said:

This didn't work for me. It just made the spaces between my columns expand. I have the same problem as the previous commenter, and I want the same hover plus overlay/title effect from the desktop version in the mobile version. Could I get some help with this? 

Here is my website:

https://www.majoaparicio.com/

Thank you!

The text is white color so you see space. Use this new code

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(1,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
.portfolio-text h3 {
    color: black !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
On 12/24/2021 at 9:37 PM, tuanphan said:

Add this to Design > Custom CSS

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

 

 

On 1/5/2022 at 2:19 AM, tuanphan said:

The text is white color so you see space. Use this new code

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(1,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
.portfolio-text h3 {
    color: black !important;
}
}

 

This still didn't do the same hover overlay effect the desktop does. It just added a title under each image.

Link to comment
On 1/6/2022 at 9:15 PM, Majojo said:

 

This still didn't do the same hover overlay effect the desktop does. It just added a title under each image.

This make title under image on mobile. Can you describe again what you want?

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
  • 9 months later...
On 1/8/2022 at 2:44 AM, tuanphan said:

This make title under image on mobile. Can you describe again what you want?

Jumping in late here. I have the same issue regarding portfolio hover overlay. Your CSS code helped a lot, thank you!
Do you know if it´s possible to have a touch/tap on a mobile device trigger the overlay instead of a hover? In that way the title will not permanently be visible under the image, but appear when you tap the image?

Thank you very much!

Link to comment
22 hours ago, MixedByHerman said:

Jumping in late here. I have the same issue regarding portfolio hover overlay. Your CSS code helped a lot, thank you!
Do you know if it´s possible to have a touch/tap on a mobile device trigger the overlay instead of a hover? In that way the title will not permanently be visible under the image, but appear when you tap the image?

Thank you very much!

Can you share link to your site? We can take a look

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
  • 2 weeks later...
On 10/31/2022 at 7:14 PM, MixedByHerman said:

You mean

first tap: show title + overlay

second tap: redirect to individual projects?

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
  • 4 weeks later...

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.