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


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

FREE CONSULTATION

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

Status

Resolved

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