Shadow Box

web page is https://www.eye4events.com

Give this a try:

.widget-front {
  background-color: rgba(250, 250, 250, 0.6);
  min-height: 460px;
}

Can’t make the white square transparent as the image filters through. To see what I mean, try:

.round-div {
  border: 104px solid rgba(250, 250, 250, 0.6);
}

Try changing the 0.6 to suit you.

What section would I enter this code at?

Custom CSS in Appearance > Customize

it’s currently not working once code was inserted into css

Okay it’s working now https://www.eye4events.com but how can I apply it to other pages as well such as services?

body:not(.home) #main-wrapper {
    background-color: rgba(250, 250, 250, 0.6);
}

Take a look at Firebug / Developer tools, so you can learn to find these out quickly. Video here: https://www.themesandco.com/snippet/firebug-best-spent-6-minutes/