Portfolio Text on Image No Hover No Zoom

mchadwick171

Hi, I want to remove the zoom and hover feature on my individual portfolio projects (Travel Gallery is my main Portfolio page). I want the title text to always show on top of the images without any mouse over effect. What CSS would I use to achieve this? Thank you!

https://awaywithmeredith.com/travel-gallery/

Phil

Hi,

You can deactivate this feature in Betheme -> Theme options -> Global -> Image frame.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mchadwick171

Hi, this will not work because disabling the hover feature removes the overlay text altogether. I always want the title text to still display over the image, just without the hover effect. So the text displays all the time, but there is no hover feature. How would I achieve this?

Phil

Please, put the following CSS code in Betheme -> Theme options -> Custom CSS & JS -> CSS, and see if this is what you wanted to achieve.

.if-overlay .portfolio_wrapper .image_frame .image_wrapper .image_links{
   opacity: 1!important;
}
.if-overlay .portfolio_wrapper .image_frame:hover .image_wrapper img{
   transform: none!important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mchadwick171

Thanks for this, the text shows up now without needing a hover! But I do still get a weird flashing when I hover over the image where the text disappears for a very brief moment before reappearing. Is there a way to get rid of this?

mchadwick171

Perhaps the hover time could be reduced to such a small amount of time so that this "hover flash" is essentially invisible?

Phil

Please, add this code:

.portfolio_wrapper .portfolio-item .image_frame.scale-with-grid * {
   animation: none!important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mchadwick171

It's perfect, thank you!!