can I create a transparent overlay footer?

First of all – do you like to add this image to #footer or to #socket?
Have you both on your installation or only one?
Is it with curtain effect or not?
Do you want that on all pages/posts or only on a specific page?

See here on one page of mine: https://webers-testseite.de/impressum/
this is a seamless png file – but it will work with one big png the same way except repeat.

#top.page-id-2466 #footer::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 122px;
  background-image: url(https://webers-testseite.de/wp-content/uploads/grass.png);
  background-repeat: repeat-x;
  top: -122px;
}

#top.page-id-2466 #footer {
  overflow: visible !important;
}

so did you try my solution?
Upload your image – copy that url and replace in my code the url.
Put this to your quick css:

#top #footer::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 122px; 	/*** these two values reflects the image dimensions ***/
  top: -122px;  	/*** these two values reflects the image dimensions ***/
  background-image: url(https://webers-testseite.de/wp-content/uploads/grass.png);  /*** my example image has a height of 122px - and is seamless ***/
  background-repeat: repeat-x;   /*** because my image is seamless I can tile here ***/
}

#top #footer {
  overflow: visible !important;
}

__________________

PS – if you use curtain effect – the selectors will be different.