-4

I would like to achieve the following effect: https://wildebeest.com.au/ enter image description here It is a video background (which i already have) with an black overlay and see through text or image, when hovering over the text/image the video reveals.

I have no clue how to make this , i can make a black overlay but not the see through text or hover. I am using wordpress with the divi theme/builder.

thank you.

user10520876
  • 1
  • SO is not a coding service where you request features and we do the work for you. It is expected that you at least attempt to code this for yourself. I would suggest that you do some additional research, either via Google or by searching SO then make an attempt. If you still have trouble, please come back with your code and explain what you have tried in the body of the original question. – Justin R. Oct 17 '18 at 21:37
  • I suggest making a black overlay (png with transparency) so that the characters are transparent and the background is black. However, when looking at the wildebeest sourcecode, it seems to have been done with svg. Either way, you need an overlay on top of a video playing – Flame Oct 17 '18 at 21:38

1 Answers1

0

To achieve this, first, you have to check how they do it:

They use an overlay image using SVG vector format, https://magc.co/Ul7aQ

You can create your own SVG using some design tools like Illustrator

that format is pretty light and then, they fill it around with divs with a black background, all these has to be in a layer on top (using z-index maybe)

The rest is CSS transitions depending where you have the mouse.

WhGandalf
  • 83
  • 8