Topic: Hover image, keep mask text in front, just highlight it on hover
Hi everybody.
I'm using images with masks to display some text on hover. But the default behavior is to hide the text and display it only on hover. Could you help me to keep the text in front of the image and, when hover, show the colored mask over the image and highlight the white text a little more?
Thanks Andre
Hi,
As you mentioned default behavior for masks is to show content on hover. To achieve what you want, you would have to add two masks to your image - the first mask with the background and the second - your custom mask for the text.
I've made a snippet for you with this functionality https://mdbootstrap.com/snippets/jquery/marcin-luczak/2931528
In the CSS section .overlay:hover > .custom-mask p defines how will text behave on hover on mask.
Regards, Marcin
decosvaldo pro commented 4 years ago
That is perfect. Thanks!
Marcin Luczak staff commented 4 years ago
I'm happy that I could help :)
Regards, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.2
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No