Text appear when hovering over image.

Vic Vanwalle

• January 23, 2024 20:46

Hello!

I was wondering if there is a function in Brizy Cloud where you can add text over an image when hovering over the image. I tried a lot of things but nothing seemed to work. Thanks in advance for helping! 

Kind Regards,

Vic Vanwalle.

0

• 

  KC George

  • January 24, 2024 09:14
  • Edited

  Hi Vic Vanwalle,

  You can make a text to appear when hovering over an image using CSS.  For an example, please visit the URL https://restaurant1.brizy.site/en/text-on-hover and hover your the mouse pointer over the image in the hero section.

  Add the image as a background to a column and add an overlay text using the Brizy Text element. Set the text color to transparent and add the following CSS to the column as shown in this screenshot https://jmp.sh/js7HZXkS

  element:hover span,
  element:hover strong {
  /* Change the color on hover */
  color: white !important;
  }  

  For more detailed instructions, you could see this screen recording. https://jmp.sh/DINxpN7u

  0

Please sign in to leave a comment.