Additional animated svg images in div block

Hi guys, i was wondering if you could help me out here. I have created a div block tab max height, 353px, colour background on the div block not an image.

I currently have 2 headings, a paragraph and a button inside the div block… Which is set up and working perfectly, the issue is this; I would like to add a svg image,of a simple loop. The purpose is to have the svg sit in the back like a back ground image, but also to animate when mouse hovers. I managed to rig this up first time round but, the heading, text and paragraph where not aligned. But i managed to make the animation work. Is there an easier way to achieve this?

https://preview.webflow.com/preview/misters-trendy-project?utm_medium=preview_link&utm_source=designer&utm_content=misters-trendy-project&preview=9fd98b4b12a6ebc19635e72efa5baf16&mode=preview

Alright there Mister.
You are almost there.
You need to look at relatives and absolute and z-index.

So
Change Theory Div Container = relative z-index 1
Create a new Div under it “div block 4” in your case.
Change it to absolute and z-index 1
Move ALL the text into that.
Change image to Absolute and z-index 0

Then play with positions.

If this is what you want tick the heart and solution to thank me and keep forum tidy.

1 Like

Thanks for this IDATUS i was skeptical if anyone would reply so thank you so much for your help

Pleasure, let me know how you get on.

omg im so happy lol… you are amazing thank you so much. Another question, is there away that i can change the font colour when hovering over the change theory div container?

I like them happy.
you can add more interactions where you do the picture movement.
Click the element (text) click add, look for “text colour” etc.
Don’t forget the default one again.

1 Like

thanks again… all hail the great IDATUS

what can I say.
This should help you understand better how things hang together to move on.
Please tick the heart and solutions and this is good for all and tidies up the forum.

1 Like