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

Portfolio hover on mobile


cleanslatemarketing

Question

I am using 7.1 and have a Portfolio Overlay Grid on the home page. Works fine on desktop and I appreciate that the hover effect won't work on mobile, but at the moment the descriptions aren't appearing on mobile view either. Is there a reason for this? anyone know how I can force the descriptions to show? 

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

5 answers to this question

Recommended Posts

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

 

Link to post
  • 0

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

 

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