Prlane87

Hi @tuanphan thanks for the reply. Not quite. I have managed to get the effect to do what I want (ie. float from the bottom) - however it sits in front of everything and I would rather it sat behind the text and button. Currently it sits in front and it doesn't allow me to press the button (see screenshot below) I need this 'layer' to sit behind the other layers

Site URL: http://www.kennedy-lane.co.uk/ I have been doing some customisations to my portfolio site - http://www.kennedy-lane.co.uk/ I managed to get the CSS animation working how I would like, however, I cannot get it to sit properly in context of the other sections. I'd like it to sit behind the text and button, but in front of the background. Initially I thought the CSS wasn't working because it wasn't showing on my site at all, but I altered the z index to 2 and it showed. Anything less than that it doesn't - which makes me think the background of that section is stopping it being visible with anything less than 2. I assumed I could then alter the z index of the button and text using the block ID's but couldn't get that to work myself. I then looked into changing opacity of the background colour to see if that would allow me to keep a lower z index but still show the animation but I am out of ideas. Any help would be greatly appreciated /* Footer over bubbles */ section[data-section-id="61448c01f26d6058a293ec69"] {z-index: 3;} /* Animated Circles CSS */ .circles { position: absolute; bottom: 0; left: 0; width: 90%; height: 100%; z-index: 2; } .circles li { position: absolute; display: block; list-style: none; width: 100px; height: 100px; background: rgba(59, 237, 183, 1); animation: animate 25s linear infinite; bottom: calc(-200px - 40vh); } .circles li:nth-child(1) { left: 25%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 20s; border-radius: 100%; border-top-left-radius: 100% !important; background: rgba(59, 237, 183, 1); } .circles li:nth-child(2) { left: 10%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 25s; border-radius: 100%; border-top-left-radius: 100% !important; background: rgba(59, 237, 183, 1); } .circles li:nth-child(3) { left: 70%; width: 100px; height: 100px; animation-delay: 5s; animation-duration: 20s; border-radius: 100%; border-top-left-radius: 100% !important; background: rgba(59, 237, 183, 1); } .circles li:nth-child(4) { left: 40%; width: 100px; height: 100px; animation-delay: 5s; animation-duration: 15s; border-radius: 100%; border-top-left-radius: 100% !important; background: rgba(59, 237, 183, 1); } .circles li:nth-child(5) { left: 60%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 20s; border-radius: 100%; border-top-left-radius: 100% !important; background: rgba(59, 237, 183, 1); } .circles li:nth-child(6) { left: 75%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 25s; border-radius: 100%; border-top-left-radius: 100% !important; background: rgba(59, 237, 183, 1); } .circles li:nth-child(7) { left: 35%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 30s; border-radius: 100%; border-top-left-radius: 100% !important; background: rgba(59, 237, 183, 1); } .circles li:nth-child(8) { left: 50%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 35s; border-radius: 100%; border-top-left-radius: 100% !important; background: rgba(59, 237, 183, 1); } .circles li:nth-child(9) { left: 20%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 40s; border-radius: 100%; border-top-left-radius: 100% !important; background: rgba(59, 237, 183, 1); } .circles li:nth-child(10) { left: 85%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 45s; border-radius: 100%; border-top-left-radius: 100% !important; background: rgba(59, 237, 183, 1); } @keyframes animate { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 50% { transform: translateY(-60vh) rotate(360deg); opacity: 1; } 100% { transform: translateY(-120vh) rotate(720deg); opacity: 0; } } <ul class='circles'> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>