Topic: Hover image, keep mask text in front, just highlight it on hover

decosvaldo pro asked 3 years ago

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

Marcin Luczak staff answered 3 years ago


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 In the CSS section .overlay:hover > .custom-mask p defines how will text behave on hover on mask.

Regards, Marcin

decosvaldo pro commented 3 years ago

That is perfect. Thanks!

Marcin Luczak staff commented 3 years ago

I'm happy that I could help :)

Regards, Marcin

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: 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