+ 1

<div> doesn't collide with other elements

I've created a <div> element and with CSS it pass above other elements. HTML: <!DOCTYPE html> <html> <head> <title>Liquid text animation</title> <link rel="stylesheet" type="text/css" href="style.css"> <body> <div class="content"> <h2>Water</h2> <h2>Water</h2> </div> </body> </head> </html> CSS: @import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: black; display: flex; justify-content: center; justify-items: center; min-height: 100vh; } .content { position: relative; } .content h2{ position: absolute; transform: translate(-50%,-10%); font-size: 8em; } .content h2:nth-child(1) { color: transparent; -webkit-text-stroke: 2px #03a9; } .content h2:nth-child(2) { color: #03a9; animation: animate 4s ease-in-out infinite; } @keyframes animate { 0%,100% { clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%); } 50%{ clip-path: polygon(0 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); } }

html css div

27th Feb 2021, 1:25 PM

Signor Gatto

1 Answer

- 1

not know exactly what you're meaning by "doesn't collide", but here is your corrected code (fix html structure) and change text (h2) color to better see the result (you put transparent color for one and dark color for other, on a black backgrounf, so we cannot see anything ^^) https://code.sololearn.com/WoDqU7k6tYfX/?ref=app

27th Feb 2021, 4:22 PM

visph